diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index 04a4e91..bb2808a 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -97,7 +97,7 @@ dy -= height / 2; // Allow for pixel rounding - if (renderer.roundPixels) + if (sprite.roundPixels) { renderer.context.setTransform( wt.a, diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index 04a4e91..bb2808a 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -97,7 +97,7 @@ dy -= height / 2; // Allow for pixel rounding - if (renderer.roundPixels) + if (sprite.roundPixels) { renderer.context.setTransform( wt.a, diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 23c0225..bc4e764 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,8 +38,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) { @@ -57,6 +55,11 @@ // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); + if (options.roundPixels) + { + // TODO - Log a warning to users telling them to use PIXI.settings.ROUND_PIXELS instead + } + /** * The supplied constructor options. * @@ -141,14 +144,6 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - * @member {boolean} - */ - this.roundPixels = options.roundPixels; - - /** * The background color as a number. * * @member {number} @@ -326,8 +321,6 @@ this.preserveDrawingBuffer = false; this.clearBeforeRender = false; - this.roundPixels = false; - this._backgroundColor = 0; this._backgroundColorRgba = null; this._backgroundColorString = null; diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index 04a4e91..bb2808a 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -97,7 +97,7 @@ dy -= height / 2; // Allow for pixel rounding - if (renderer.roundPixels) + if (sprite.roundPixels) { renderer.context.setTransform( wt.a, diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 23c0225..bc4e764 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,8 +38,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) { @@ -57,6 +55,11 @@ // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); + if (options.roundPixels) + { + // TODO - Log a warning to users telling them to use PIXI.settings.ROUND_PIXELS instead + } + /** * The supplied constructor options. * @@ -141,14 +144,6 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - * @member {boolean} - */ - this.roundPixels = options.roundPixels; - - /** * The background color as a number. * * @member {number} @@ -326,8 +321,6 @@ this.preserveDrawingBuffer = false; this.clearBeforeRender = false; - this.roundPixels = false; - this._backgroundColor = 0; this._backgroundColorRgba = null; this._backgroundColorString = null; diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index 8ba35b4..245cb37 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -51,8 +51,6 @@ * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - Enables drawing buffer preservation, * enable this if you need to call toDataUrl on the WebGL context. - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when - * rendering, stopping pixel interpolation. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {string} [options.powerPreference] - Parameter passed to WebGL context, set to "high-performance" diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index 04a4e91..bb2808a 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -97,7 +97,7 @@ dy -= height / 2; // Allow for pixel rounding - if (renderer.roundPixels) + if (sprite.roundPixels) { renderer.context.setTransform( wt.a, diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 23c0225..bc4e764 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,8 +38,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) { @@ -57,6 +55,11 @@ // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); + if (options.roundPixels) + { + // TODO - Log a warning to users telling them to use PIXI.settings.ROUND_PIXELS instead + } + /** * The supplied constructor options. * @@ -141,14 +144,6 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - * @member {boolean} - */ - this.roundPixels = options.roundPixels; - - /** * The background color as a number. * * @member {number} @@ -326,8 +321,6 @@ this.preserveDrawingBuffer = false; this.clearBeforeRender = false; - this.roundPixels = false; - this._backgroundColor = 0; this._backgroundColorRgba = null; this._backgroundColorString = null; diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index 8ba35b4..245cb37 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -51,8 +51,6 @@ * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - Enables drawing buffer preservation, * enable this if you need to call toDataUrl on the WebGL context. - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when - * rendering, stopping pixel interpolation. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {string} [options.powerPreference] - Parameter passed to WebGL context, set to "high-performance" diff --git a/packages/mesh/package.json b/packages/mesh/package.json index 2613f36..d8d0cc9 100644 --- a/packages/mesh/package.json +++ b/packages/mesh/package.json @@ -26,6 +26,7 @@ "@pixi/core": "^5.0.0-alpha.3", "@pixi/display": "^5.0.0-alpha.3", "@pixi/math": "^5.0.0-alpha.3", + "@pixi/settings": "^5.0.0-alpha.3", "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index 04a4e91..bb2808a 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -97,7 +97,7 @@ dy -= height / 2; // Allow for pixel rounding - if (renderer.roundPixels) + if (sprite.roundPixels) { renderer.context.setTransform( wt.a, diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 23c0225..bc4e764 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,8 +38,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) { @@ -57,6 +55,11 @@ // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); + if (options.roundPixels) + { + // TODO - Log a warning to users telling them to use PIXI.settings.ROUND_PIXELS instead + } + /** * The supplied constructor options. * @@ -141,14 +144,6 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - * @member {boolean} - */ - this.roundPixels = options.roundPixels; - - /** * The background color as a number. * * @member {number} @@ -326,8 +321,6 @@ this.preserveDrawingBuffer = false; this.clearBeforeRender = false; - this.roundPixels = false; - this._backgroundColor = 0; this._backgroundColorRgba = null; this._backgroundColorString = null; diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index 8ba35b4..245cb37 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -51,8 +51,6 @@ * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - Enables drawing buffer preservation, * enable this if you need to call toDataUrl on the WebGL context. - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when - * rendering, stopping pixel interpolation. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {string} [options.powerPreference] - Parameter passed to WebGL context, set to "high-performance" diff --git a/packages/mesh/package.json b/packages/mesh/package.json index 2613f36..d8d0cc9 100644 --- a/packages/mesh/package.json +++ b/packages/mesh/package.json @@ -26,6 +26,7 @@ "@pixi/core": "^5.0.0-alpha.3", "@pixi/display": "^5.0.0-alpha.3", "@pixi/math": "^5.0.0-alpha.3", + "@pixi/settings": "^5.0.0-alpha.3", "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { diff --git a/packages/mesh/src/Mesh.js b/packages/mesh/src/Mesh.js index 0d69a7a..742870e 100644 --- a/packages/mesh/src/Mesh.js +++ b/packages/mesh/src/Mesh.js @@ -2,6 +2,7 @@ import { Point, Polygon } from '@pixi/math'; import { BLEND_MODES, DRAW_MODES } from '@pixi/constants'; import { Container } from '@pixi/display'; +import { settings } from '@pixi/settings'; const tempPoint = new Point(); const tempPolygon = new Polygon(); @@ -112,6 +113,14 @@ // Inherited from DisplayMode, set defaults this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; + + /** + * Internal roundPixels field + * + * @member {boolean} + * @private + */ + this._roundPixels = settings.ROUND_PIXELS; } /** @@ -147,6 +156,29 @@ } /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + set roundPixels(value) + { + if (this._roundPixels !== value) + { + this._transformID = -1; + } + this._roundPixels = value; + } + + get roundPixels() + { + return this._roundPixels; + } + + /** * The multiply tint applied to the Mesh. This is a hex value. A value of * `0xFFFFFF` will remove any tint effect. * @@ -279,6 +311,14 @@ vertexData[(i * 2) + 1] = (b * x) + (d * y) + ty; } + if (this._roundPixels) + { + for (let i = 0; i < vertexData.length; i++) + { + vertexData[i] = Math.round(vertexData[i]); + } + } + this.vertexDirty = geometry.vertexDirtyId; } diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index 04a4e91..bb2808a 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -97,7 +97,7 @@ dy -= height / 2; // Allow for pixel rounding - if (renderer.roundPixels) + if (sprite.roundPixels) { renderer.context.setTransform( wt.a, diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 23c0225..bc4e764 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,8 +38,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) { @@ -57,6 +55,11 @@ // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); + if (options.roundPixels) + { + // TODO - Log a warning to users telling them to use PIXI.settings.ROUND_PIXELS instead + } + /** * The supplied constructor options. * @@ -141,14 +144,6 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - * @member {boolean} - */ - this.roundPixels = options.roundPixels; - - /** * The background color as a number. * * @member {number} @@ -326,8 +321,6 @@ this.preserveDrawingBuffer = false; this.clearBeforeRender = false; - this.roundPixels = false; - this._backgroundColor = 0; this._backgroundColorRgba = null; this._backgroundColorString = null; diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index 8ba35b4..245cb37 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -51,8 +51,6 @@ * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - Enables drawing buffer preservation, * enable this if you need to call toDataUrl on the WebGL context. - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when - * rendering, stopping pixel interpolation. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {string} [options.powerPreference] - Parameter passed to WebGL context, set to "high-performance" diff --git a/packages/mesh/package.json b/packages/mesh/package.json index 2613f36..d8d0cc9 100644 --- a/packages/mesh/package.json +++ b/packages/mesh/package.json @@ -26,6 +26,7 @@ "@pixi/core": "^5.0.0-alpha.3", "@pixi/display": "^5.0.0-alpha.3", "@pixi/math": "^5.0.0-alpha.3", + "@pixi/settings": "^5.0.0-alpha.3", "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { diff --git a/packages/mesh/src/Mesh.js b/packages/mesh/src/Mesh.js index 0d69a7a..742870e 100644 --- a/packages/mesh/src/Mesh.js +++ b/packages/mesh/src/Mesh.js @@ -2,6 +2,7 @@ import { Point, Polygon } from '@pixi/math'; import { BLEND_MODES, DRAW_MODES } from '@pixi/constants'; import { Container } from '@pixi/display'; +import { settings } from '@pixi/settings'; const tempPoint = new Point(); const tempPolygon = new Polygon(); @@ -112,6 +113,14 @@ // Inherited from DisplayMode, set defaults this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; + + /** + * Internal roundPixels field + * + * @member {boolean} + * @private + */ + this._roundPixels = settings.ROUND_PIXELS; } /** @@ -147,6 +156,29 @@ } /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + set roundPixels(value) + { + if (this._roundPixels !== value) + { + this._transformID = -1; + } + this._roundPixels = value; + } + + get roundPixels() + { + return this._roundPixels; + } + + /** * The multiply tint applied to the Mesh. This is a hex value. A value of * `0xFFFFFF` will remove any tint effect. * @@ -279,6 +311,14 @@ vertexData[(i * 2) + 1] = (b * x) + (d * y) + ty; } + if (this._roundPixels) + { + for (let i = 0; i < vertexData.length; i++) + { + vertexData[i] = Math.round(vertexData[i]); + } + } + this.vertexDirty = geometry.vertexDirtyId; } diff --git a/packages/particles/src/ParticleContainer.js b/packages/particles/src/ParticleContainer.js index 892317c..2c9e62a 100644 --- a/packages/particles/src/ParticleContainer.js +++ b/packages/particles/src/ParticleContainer.js @@ -126,11 +126,13 @@ this.autoResize = autoResize; /** - * Used for canvas rendering. If true then the elements will be positioned at the - * nearest pixel. This provides a nice speed boost. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * Default to true here as performance is usually the priority for particles. * * @member {boolean} - * @default true; + * @default true */ this.roundPixels = true; diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index 04a4e91..bb2808a 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -97,7 +97,7 @@ dy -= height / 2; // Allow for pixel rounding - if (renderer.roundPixels) + if (sprite.roundPixels) { renderer.context.setTransform( wt.a, diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 23c0225..bc4e764 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,8 +38,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) { @@ -57,6 +55,11 @@ // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); + if (options.roundPixels) + { + // TODO - Log a warning to users telling them to use PIXI.settings.ROUND_PIXELS instead + } + /** * The supplied constructor options. * @@ -141,14 +144,6 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - * @member {boolean} - */ - this.roundPixels = options.roundPixels; - - /** * The background color as a number. * * @member {number} @@ -326,8 +321,6 @@ this.preserveDrawingBuffer = false; this.clearBeforeRender = false; - this.roundPixels = false; - this._backgroundColor = 0; this._backgroundColorRgba = null; this._backgroundColorString = null; diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index 8ba35b4..245cb37 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -51,8 +51,6 @@ * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - Enables drawing buffer preservation, * enable this if you need to call toDataUrl on the WebGL context. - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when - * rendering, stopping pixel interpolation. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {string} [options.powerPreference] - Parameter passed to WebGL context, set to "high-performance" diff --git a/packages/mesh/package.json b/packages/mesh/package.json index 2613f36..d8d0cc9 100644 --- a/packages/mesh/package.json +++ b/packages/mesh/package.json @@ -26,6 +26,7 @@ "@pixi/core": "^5.0.0-alpha.3", "@pixi/display": "^5.0.0-alpha.3", "@pixi/math": "^5.0.0-alpha.3", + "@pixi/settings": "^5.0.0-alpha.3", "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { diff --git a/packages/mesh/src/Mesh.js b/packages/mesh/src/Mesh.js index 0d69a7a..742870e 100644 --- a/packages/mesh/src/Mesh.js +++ b/packages/mesh/src/Mesh.js @@ -2,6 +2,7 @@ import { Point, Polygon } from '@pixi/math'; import { BLEND_MODES, DRAW_MODES } from '@pixi/constants'; import { Container } from '@pixi/display'; +import { settings } from '@pixi/settings'; const tempPoint = new Point(); const tempPolygon = new Polygon(); @@ -112,6 +113,14 @@ // Inherited from DisplayMode, set defaults this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; + + /** + * Internal roundPixels field + * + * @member {boolean} + * @private + */ + this._roundPixels = settings.ROUND_PIXELS; } /** @@ -147,6 +156,29 @@ } /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + set roundPixels(value) + { + if (this._roundPixels !== value) + { + this._transformID = -1; + } + this._roundPixels = value; + } + + get roundPixels() + { + return this._roundPixels; + } + + /** * The multiply tint applied to the Mesh. This is a hex value. A value of * `0xFFFFFF` will remove any tint effect. * @@ -279,6 +311,14 @@ vertexData[(i * 2) + 1] = (b * x) + (d * y) + ty; } + if (this._roundPixels) + { + for (let i = 0; i < vertexData.length; i++) + { + vertexData[i] = Math.round(vertexData[i]); + } + } + this.vertexDirty = geometry.vertexDirtyId; } diff --git a/packages/particles/src/ParticleContainer.js b/packages/particles/src/ParticleContainer.js index 892317c..2c9e62a 100644 --- a/packages/particles/src/ParticleContainer.js +++ b/packages/particles/src/ParticleContainer.js @@ -126,11 +126,13 @@ this.autoResize = autoResize; /** - * Used for canvas rendering. If true then the elements will be positioned at the - * nearest pixel. This provides a nice speed boost. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * Default to true here as performance is usually the priority for particles. * * @member {boolean} - * @default true; + * @default true */ this.roundPixels = true; diff --git a/packages/settings/src/settings.js b/packages/settings/src/settings.js index 30cde37..c31b1bf 100644 --- a/packages/settings/src/settings.js +++ b/packages/settings/src/settings.js @@ -94,7 +94,6 @@ * @property {number} backgroundColor=0x000000 * @property {boolean} clearBeforeRender=true * @property {boolean} preserveDrawingBuffer=false - * @property {boolean} roundPixels=false * @property {number} width=800 * @property {number} height=600 * @property {boolean} legacy=false @@ -108,7 +107,6 @@ backgroundColor: 0x000000, clearBeforeRender: true, preserveDrawingBuffer: false, - roundPixels: false, width: 800, height: 600, legacy: false, @@ -211,4 +209,17 @@ * @default true */ CREATE_IMAGE_BITMAP: true, + + /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * + * @static + * @constant + * @memberof PIXI.settings + * @type {boolean} + * @default false + */ + ROUND_PIXELS: false, }; diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index 04a4e91..bb2808a 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -97,7 +97,7 @@ dy -= height / 2; // Allow for pixel rounding - if (renderer.roundPixels) + if (sprite.roundPixels) { renderer.context.setTransform( wt.a, diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 23c0225..bc4e764 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,8 +38,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) { @@ -57,6 +55,11 @@ // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); + if (options.roundPixels) + { + // TODO - Log a warning to users telling them to use PIXI.settings.ROUND_PIXELS instead + } + /** * The supplied constructor options. * @@ -141,14 +144,6 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - * @member {boolean} - */ - this.roundPixels = options.roundPixels; - - /** * The background color as a number. * * @member {number} @@ -326,8 +321,6 @@ this.preserveDrawingBuffer = false; this.clearBeforeRender = false; - this.roundPixels = false; - this._backgroundColor = 0; this._backgroundColorRgba = null; this._backgroundColorString = null; diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index 8ba35b4..245cb37 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -51,8 +51,6 @@ * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - Enables drawing buffer preservation, * enable this if you need to call toDataUrl on the WebGL context. - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when - * rendering, stopping pixel interpolation. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {string} [options.powerPreference] - Parameter passed to WebGL context, set to "high-performance" diff --git a/packages/mesh/package.json b/packages/mesh/package.json index 2613f36..d8d0cc9 100644 --- a/packages/mesh/package.json +++ b/packages/mesh/package.json @@ -26,6 +26,7 @@ "@pixi/core": "^5.0.0-alpha.3", "@pixi/display": "^5.0.0-alpha.3", "@pixi/math": "^5.0.0-alpha.3", + "@pixi/settings": "^5.0.0-alpha.3", "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { diff --git a/packages/mesh/src/Mesh.js b/packages/mesh/src/Mesh.js index 0d69a7a..742870e 100644 --- a/packages/mesh/src/Mesh.js +++ b/packages/mesh/src/Mesh.js @@ -2,6 +2,7 @@ import { Point, Polygon } from '@pixi/math'; import { BLEND_MODES, DRAW_MODES } from '@pixi/constants'; import { Container } from '@pixi/display'; +import { settings } from '@pixi/settings'; const tempPoint = new Point(); const tempPolygon = new Polygon(); @@ -112,6 +113,14 @@ // Inherited from DisplayMode, set defaults this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; + + /** + * Internal roundPixels field + * + * @member {boolean} + * @private + */ + this._roundPixels = settings.ROUND_PIXELS; } /** @@ -147,6 +156,29 @@ } /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + set roundPixels(value) + { + if (this._roundPixels !== value) + { + this._transformID = -1; + } + this._roundPixels = value; + } + + get roundPixels() + { + return this._roundPixels; + } + + /** * The multiply tint applied to the Mesh. This is a hex value. A value of * `0xFFFFFF` will remove any tint effect. * @@ -279,6 +311,14 @@ vertexData[(i * 2) + 1] = (b * x) + (d * y) + ty; } + if (this._roundPixels) + { + for (let i = 0; i < vertexData.length; i++) + { + vertexData[i] = Math.round(vertexData[i]); + } + } + this.vertexDirty = geometry.vertexDirtyId; } diff --git a/packages/particles/src/ParticleContainer.js b/packages/particles/src/ParticleContainer.js index 892317c..2c9e62a 100644 --- a/packages/particles/src/ParticleContainer.js +++ b/packages/particles/src/ParticleContainer.js @@ -126,11 +126,13 @@ this.autoResize = autoResize; /** - * Used for canvas rendering. If true then the elements will be positioned at the - * nearest pixel. This provides a nice speed boost. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * Default to true here as performance is usually the priority for particles. * * @member {boolean} - * @default true; + * @default true */ this.roundPixels = true; diff --git a/packages/settings/src/settings.js b/packages/settings/src/settings.js index 30cde37..c31b1bf 100644 --- a/packages/settings/src/settings.js +++ b/packages/settings/src/settings.js @@ -94,7 +94,6 @@ * @property {number} backgroundColor=0x000000 * @property {boolean} clearBeforeRender=true * @property {boolean} preserveDrawingBuffer=false - * @property {boolean} roundPixels=false * @property {number} width=800 * @property {number} height=600 * @property {boolean} legacy=false @@ -108,7 +107,6 @@ backgroundColor: 0x000000, clearBeforeRender: true, preserveDrawingBuffer: false, - roundPixels: false, width: 800, height: 600, legacy: false, @@ -211,4 +209,17 @@ * @default true */ CREATE_IMAGE_BITMAP: true, + + /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * + * @static + * @constant + * @memberof PIXI.settings + * @type {boolean} + * @default false + */ + ROUND_PIXELS: false, }; diff --git a/packages/sprite/src/Sprite.js b/packages/sprite/src/Sprite.js index 7b66e6e..5e9c7c9 100644 --- a/packages/sprite/src/Sprite.js +++ b/packages/sprite/src/Sprite.js @@ -3,6 +3,7 @@ import { Texture } from '@pixi/core'; import { BLEND_MODES } from '@pixi/constants'; import { Container } from '@pixi/display'; +import { settings } from '@pixi/settings'; const tempPoint = new Point(); const indices = new Uint16Array([0, 1, 2, 0, 2, 3]); @@ -166,6 +167,14 @@ * used to fast check if a sprite is.. a sprite! */ this.isSprite = true; + + /** + * Internal roundPixels field + * + * @member {boolean} + * @private + */ + this._roundPixels = settings.ROUND_PIXELS; } /** @@ -271,8 +280,13 @@ vertexData[6] = (a * w1) + (c * h0) + tx; vertexData[7] = (d * h0) + (b * w1) + ty; - // console.log(orig.width) - // console.log(vertexData, this.texture.baseTexture) + if (this._roundPixels) + { + for (let i = 0; i < 8; i++) + { + vertexData[i] = Math.round(vertexData[i]); + } + } } /** @@ -483,6 +497,29 @@ } /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + set roundPixels(value) + { + if (this._roundPixels !== value) + { + this._transformID = -1; + } + this._roundPixels = value; + } + + get roundPixels() + { + return this._roundPixels; + } + + /** * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index 04a4e91..bb2808a 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -97,7 +97,7 @@ dy -= height / 2; // Allow for pixel rounding - if (renderer.roundPixels) + if (sprite.roundPixels) { renderer.context.setTransform( wt.a, diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 23c0225..bc4e764 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,8 +38,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) { @@ -57,6 +55,11 @@ // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); + if (options.roundPixels) + { + // TODO - Log a warning to users telling them to use PIXI.settings.ROUND_PIXELS instead + } + /** * The supplied constructor options. * @@ -141,14 +144,6 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - * @member {boolean} - */ - this.roundPixels = options.roundPixels; - - /** * The background color as a number. * * @member {number} @@ -326,8 +321,6 @@ this.preserveDrawingBuffer = false; this.clearBeforeRender = false; - this.roundPixels = false; - this._backgroundColor = 0; this._backgroundColorRgba = null; this._backgroundColorString = null; diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index 8ba35b4..245cb37 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -51,8 +51,6 @@ * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - Enables drawing buffer preservation, * enable this if you need to call toDataUrl on the WebGL context. - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when - * rendering, stopping pixel interpolation. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {string} [options.powerPreference] - Parameter passed to WebGL context, set to "high-performance" diff --git a/packages/mesh/package.json b/packages/mesh/package.json index 2613f36..d8d0cc9 100644 --- a/packages/mesh/package.json +++ b/packages/mesh/package.json @@ -26,6 +26,7 @@ "@pixi/core": "^5.0.0-alpha.3", "@pixi/display": "^5.0.0-alpha.3", "@pixi/math": "^5.0.0-alpha.3", + "@pixi/settings": "^5.0.0-alpha.3", "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { diff --git a/packages/mesh/src/Mesh.js b/packages/mesh/src/Mesh.js index 0d69a7a..742870e 100644 --- a/packages/mesh/src/Mesh.js +++ b/packages/mesh/src/Mesh.js @@ -2,6 +2,7 @@ import { Point, Polygon } from '@pixi/math'; import { BLEND_MODES, DRAW_MODES } from '@pixi/constants'; import { Container } from '@pixi/display'; +import { settings } from '@pixi/settings'; const tempPoint = new Point(); const tempPolygon = new Polygon(); @@ -112,6 +113,14 @@ // Inherited from DisplayMode, set defaults this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; + + /** + * Internal roundPixels field + * + * @member {boolean} + * @private + */ + this._roundPixels = settings.ROUND_PIXELS; } /** @@ -147,6 +156,29 @@ } /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + set roundPixels(value) + { + if (this._roundPixels !== value) + { + this._transformID = -1; + } + this._roundPixels = value; + } + + get roundPixels() + { + return this._roundPixels; + } + + /** * The multiply tint applied to the Mesh. This is a hex value. A value of * `0xFFFFFF` will remove any tint effect. * @@ -279,6 +311,14 @@ vertexData[(i * 2) + 1] = (b * x) + (d * y) + ty; } + if (this._roundPixels) + { + for (let i = 0; i < vertexData.length; i++) + { + vertexData[i] = Math.round(vertexData[i]); + } + } + this.vertexDirty = geometry.vertexDirtyId; } diff --git a/packages/particles/src/ParticleContainer.js b/packages/particles/src/ParticleContainer.js index 892317c..2c9e62a 100644 --- a/packages/particles/src/ParticleContainer.js +++ b/packages/particles/src/ParticleContainer.js @@ -126,11 +126,13 @@ this.autoResize = autoResize; /** - * Used for canvas rendering. If true then the elements will be positioned at the - * nearest pixel. This provides a nice speed boost. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * Default to true here as performance is usually the priority for particles. * * @member {boolean} - * @default true; + * @default true */ this.roundPixels = true; diff --git a/packages/settings/src/settings.js b/packages/settings/src/settings.js index 30cde37..c31b1bf 100644 --- a/packages/settings/src/settings.js +++ b/packages/settings/src/settings.js @@ -94,7 +94,6 @@ * @property {number} backgroundColor=0x000000 * @property {boolean} clearBeforeRender=true * @property {boolean} preserveDrawingBuffer=false - * @property {boolean} roundPixels=false * @property {number} width=800 * @property {number} height=600 * @property {boolean} legacy=false @@ -108,7 +107,6 @@ backgroundColor: 0x000000, clearBeforeRender: true, preserveDrawingBuffer: false, - roundPixels: false, width: 800, height: 600, legacy: false, @@ -211,4 +209,17 @@ * @default true */ CREATE_IMAGE_BITMAP: true, + + /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * + * @static + * @constant + * @memberof PIXI.settings + * @type {boolean} + * @default false + */ + ROUND_PIXELS: false, }; diff --git a/packages/sprite/src/Sprite.js b/packages/sprite/src/Sprite.js index 7b66e6e..5e9c7c9 100644 --- a/packages/sprite/src/Sprite.js +++ b/packages/sprite/src/Sprite.js @@ -3,6 +3,7 @@ import { Texture } from '@pixi/core'; import { BLEND_MODES } from '@pixi/constants'; import { Container } from '@pixi/display'; +import { settings } from '@pixi/settings'; const tempPoint = new Point(); const indices = new Uint16Array([0, 1, 2, 0, 2, 3]); @@ -166,6 +167,14 @@ * used to fast check if a sprite is.. a sprite! */ this.isSprite = true; + + /** + * Internal roundPixels field + * + * @member {boolean} + * @private + */ + this._roundPixels = settings.ROUND_PIXELS; } /** @@ -271,8 +280,13 @@ vertexData[6] = (a * w1) + (c * h0) + tx; vertexData[7] = (d * h0) + (b * w1) + ty; - // console.log(orig.width) - // console.log(vertexData, this.texture.baseTexture) + if (this._roundPixels) + { + for (let i = 0; i < 8; i++) + { + vertexData[i] = Math.round(vertexData[i]); + } + } } /** @@ -483,6 +497,29 @@ } /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + set roundPixels(value) + { + if (this._roundPixels !== value) + { + this._transformID = -1; + } + this._roundPixels = value; + } + + get roundPixels() + { + return this._roundPixels; + } + + /** * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} diff --git a/packages/text-bitmap/src/BitmapText.js b/packages/text-bitmap/src/BitmapText.js index 3dcb001..1d6d0ac 100644 --- a/packages/text-bitmap/src/BitmapText.js +++ b/packages/text-bitmap/src/BitmapText.js @@ -135,6 +135,17 @@ */ this.dirty = false; + /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + this.roundPixels = settings.ROUND_PIXELS; + this.updateText(); } @@ -272,6 +283,7 @@ else { c = new Sprite(chars[i].texture); + c.roundPixels = this.roundPixels; this._glyphs.push(c); } diff --git a/packages/app/src/Application.js b/packages/app/src/Application.js index e28117e..149c20b 100644 --- a/packages/app/src/Application.js +++ b/packages/app/src/Application.js @@ -43,8 +43,6 @@ * (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 {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js index 0269d12..eec3dd3 100644 --- a/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js +++ b/packages/canvas/canvas-mesh/src/CanvasMeshRenderer.js @@ -30,7 +30,7 @@ const transform = mesh.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (mesh.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index 2fd5acc..040cf3a 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -18,7 +18,7 @@ const transform = this.worldTransform; const res = renderer.resolution; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( transform.a * res, diff --git a/packages/canvas/canvas-particles/src/ParticleContainer.js b/packages/canvas/canvas-particles/src/ParticleContainer.js index 9145c56..3eb417f 100644 --- a/packages/canvas/canvas-particles/src/ParticleContainer.js +++ b/packages/canvas/canvas-particles/src/ParticleContainer.js @@ -76,7 +76,7 @@ const childTransform = child.worldTransform; - if (renderer.roundPixels) + if (this.roundPixels) { context.setTransform( childTransform.a, diff --git a/packages/canvas/canvas-renderer/src/CanvasRenderer.js b/packages/canvas/canvas-renderer/src/CanvasRenderer.js index da7e361..50dae92 100644 --- a/packages/canvas/canvas-renderer/src/CanvasRenderer.js +++ b/packages/canvas/canvas-renderer/src/CanvasRenderer.js @@ -34,8 +34,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(options, arg2, arg3) { diff --git a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js index 4d85bfe..22bc1a8 100644 --- a/packages/canvas/canvas-renderer/src/autoDetectRenderer.js +++ b/packages/canvas/canvas-renderer/src/autoDetectRenderer.js @@ -26,8 +26,6 @@ * 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.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. * @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" diff --git a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js index 04a4e91..bb2808a 100644 --- a/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js +++ b/packages/canvas/canvas-sprite/src/CanvasSpriteRenderer.js @@ -97,7 +97,7 @@ dy -= height / 2; // Allow for pixel rounding - if (renderer.roundPixels) + if (sprite.roundPixels) { renderer.context.setTransform( wt.a, diff --git a/packages/core/src/AbstractRenderer.js b/packages/core/src/AbstractRenderer.js index 23c0225..bc4e764 100644 --- a/packages/core/src/AbstractRenderer.js +++ b/packages/core/src/AbstractRenderer.js @@ -38,8 +38,6 @@ * not before the new render pass. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering, - * stopping pixel interpolation. */ constructor(system, options, arg2, arg3) { @@ -57,6 +55,11 @@ // Add the default render options options = Object.assign({}, settings.RENDER_OPTIONS, options); + if (options.roundPixels) + { + // TODO - Log a warning to users telling them to use PIXI.settings.ROUND_PIXELS instead + } + /** * The supplied constructor options. * @@ -141,14 +144,6 @@ this.clearBeforeRender = options.clearBeforeRender; /** - * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - * @member {boolean} - */ - this.roundPixels = options.roundPixels; - - /** * The background color as a number. * * @member {number} @@ -326,8 +321,6 @@ this.preserveDrawingBuffer = false; this.clearBeforeRender = false; - this.roundPixels = false; - this._backgroundColor = 0; this._backgroundColorRgba = null; this._backgroundColorString = null; diff --git a/packages/core/src/Renderer.js b/packages/core/src/Renderer.js index 8ba35b4..245cb37 100644 --- a/packages/core/src/Renderer.js +++ b/packages/core/src/Renderer.js @@ -51,8 +51,6 @@ * preserveDrawingBuffer to `true`. * @param {boolean} [options.preserveDrawingBuffer=false] - Enables drawing buffer preservation, * enable this if you need to call toDataUrl on the WebGL context. - * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when - * rendering, stopping pixel interpolation. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area * (shown if not transparent). * @param {string} [options.powerPreference] - Parameter passed to WebGL context, set to "high-performance" diff --git a/packages/mesh/package.json b/packages/mesh/package.json index 2613f36..d8d0cc9 100644 --- a/packages/mesh/package.json +++ b/packages/mesh/package.json @@ -26,6 +26,7 @@ "@pixi/core": "^5.0.0-alpha.3", "@pixi/display": "^5.0.0-alpha.3", "@pixi/math": "^5.0.0-alpha.3", + "@pixi/settings": "^5.0.0-alpha.3", "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { diff --git a/packages/mesh/src/Mesh.js b/packages/mesh/src/Mesh.js index 0d69a7a..742870e 100644 --- a/packages/mesh/src/Mesh.js +++ b/packages/mesh/src/Mesh.js @@ -2,6 +2,7 @@ import { Point, Polygon } from '@pixi/math'; import { BLEND_MODES, DRAW_MODES } from '@pixi/constants'; import { Container } from '@pixi/display'; +import { settings } from '@pixi/settings'; const tempPoint = new Point(); const tempPolygon = new Polygon(); @@ -112,6 +113,14 @@ // Inherited from DisplayMode, set defaults this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; + + /** + * Internal roundPixels field + * + * @member {boolean} + * @private + */ + this._roundPixels = settings.ROUND_PIXELS; } /** @@ -147,6 +156,29 @@ } /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + set roundPixels(value) + { + if (this._roundPixels !== value) + { + this._transformID = -1; + } + this._roundPixels = value; + } + + get roundPixels() + { + return this._roundPixels; + } + + /** * The multiply tint applied to the Mesh. This is a hex value. A value of * `0xFFFFFF` will remove any tint effect. * @@ -279,6 +311,14 @@ vertexData[(i * 2) + 1] = (b * x) + (d * y) + ty; } + if (this._roundPixels) + { + for (let i = 0; i < vertexData.length; i++) + { + vertexData[i] = Math.round(vertexData[i]); + } + } + this.vertexDirty = geometry.vertexDirtyId; } diff --git a/packages/particles/src/ParticleContainer.js b/packages/particles/src/ParticleContainer.js index 892317c..2c9e62a 100644 --- a/packages/particles/src/ParticleContainer.js +++ b/packages/particles/src/ParticleContainer.js @@ -126,11 +126,13 @@ this.autoResize = autoResize; /** - * Used for canvas rendering. If true then the elements will be positioned at the - * nearest pixel. This provides a nice speed boost. + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * Default to true here as performance is usually the priority for particles. * * @member {boolean} - * @default true; + * @default true */ this.roundPixels = true; diff --git a/packages/settings/src/settings.js b/packages/settings/src/settings.js index 30cde37..c31b1bf 100644 --- a/packages/settings/src/settings.js +++ b/packages/settings/src/settings.js @@ -94,7 +94,6 @@ * @property {number} backgroundColor=0x000000 * @property {boolean} clearBeforeRender=true * @property {boolean} preserveDrawingBuffer=false - * @property {boolean} roundPixels=false * @property {number} width=800 * @property {number} height=600 * @property {boolean} legacy=false @@ -108,7 +107,6 @@ backgroundColor: 0x000000, clearBeforeRender: true, preserveDrawingBuffer: false, - roundPixels: false, width: 800, height: 600, legacy: false, @@ -211,4 +209,17 @@ * @default true */ CREATE_IMAGE_BITMAP: true, + + /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * + * @static + * @constant + * @memberof PIXI.settings + * @type {boolean} + * @default false + */ + ROUND_PIXELS: false, }; diff --git a/packages/sprite/src/Sprite.js b/packages/sprite/src/Sprite.js index 7b66e6e..5e9c7c9 100644 --- a/packages/sprite/src/Sprite.js +++ b/packages/sprite/src/Sprite.js @@ -3,6 +3,7 @@ import { Texture } from '@pixi/core'; import { BLEND_MODES } from '@pixi/constants'; import { Container } from '@pixi/display'; +import { settings } from '@pixi/settings'; const tempPoint = new Point(); const indices = new Uint16Array([0, 1, 2, 0, 2, 3]); @@ -166,6 +167,14 @@ * used to fast check if a sprite is.. a sprite! */ this.isSprite = true; + + /** + * Internal roundPixels field + * + * @member {boolean} + * @private + */ + this._roundPixels = settings.ROUND_PIXELS; } /** @@ -271,8 +280,13 @@ vertexData[6] = (a * w1) + (c * h0) + tx; vertexData[7] = (d * h0) + (b * w1) + ty; - // console.log(orig.width) - // console.log(vertexData, this.texture.baseTexture) + if (this._roundPixels) + { + for (let i = 0; i < 8; i++) + { + vertexData[i] = Math.round(vertexData[i]); + } + } } /** @@ -483,6 +497,29 @@ } /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + set roundPixels(value) + { + if (this._roundPixels !== value) + { + this._transformID = -1; + } + this._roundPixels = value; + } + + get roundPixels() + { + return this._roundPixels; + } + + /** * The width of the sprite, setting this will actually modify the scale to achieve the value set * * @member {number} diff --git a/packages/text-bitmap/src/BitmapText.js b/packages/text-bitmap/src/BitmapText.js index 3dcb001..1d6d0ac 100644 --- a/packages/text-bitmap/src/BitmapText.js +++ b/packages/text-bitmap/src/BitmapText.js @@ -135,6 +135,17 @@ */ this.dirty = false; + /** + * If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Advantages can include sharper image quality (like text) and faster rendering on canvas. + * The main disadvantage is movement of objects may appear less smooth. + * To set the global default, change {@link PIXI.settings.ROUND_PIXELS} + * + * @member {boolean} + * @default false + */ + this.roundPixels = settings.ROUND_PIXELS; + this.updateText(); } @@ -272,6 +283,7 @@ else { c = new Sprite(chars[i].texture); + c.roundPixels = this.roundPixels; this._glyphs.push(c); } diff --git a/tools/renders/src/Renderer.js b/tools/renders/src/Renderer.js index 5ff4a8d..820247b 100644 --- a/tools/renders/src/Renderer.js +++ b/tools/renders/src/Renderer.js @@ -75,7 +75,6 @@ backgroundColor: 0xffffff, antialias: false, preserveDrawingBuffer: true, - roundPixels: true, }); this.canvas.smoothProperty = null; this.render();