diff --git a/src/core/Application.js b/src/core/Application.js index 708b718..174deb4 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -98,6 +98,16 @@ } /** + * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen + * @member {PIXI.Rectangle} + * @readonly + */ + get screen() + { + return this.renderer.screen; + } + + /** * Destroy and don't use after this. * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. */ diff --git a/src/core/Application.js b/src/core/Application.js index 708b718..174deb4 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -98,6 +98,16 @@ } /** + * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen + * @member {PIXI.Rectangle} + * @readonly + */ + get screen() + { + return this.renderer.screen; + } + + /** * Destroy and don't use after this. * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. */ diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index fa116a6..a24c775 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -1,5 +1,5 @@ import { sayHello, hex2string, hex2rgb } from '../utils'; -import { Matrix } from '../math'; +import { Matrix, Rectangle } from '../math'; import { RENDERER_TYPE } from '../const'; import settings from '../settings'; import Container from '../display/Container'; @@ -21,8 +21,8 @@ { /** * @param {string} system - The name of the system this renderer is for. - * @param {number} [width=800] - the width of the canvas view - * @param {number} [height=600] - the height of the canvas view + * @param {number} [screenWidth=800] - the width of the screen + * @param {number} [screenHeight=600] - the height of the screen * @param {object} [options] - The optional renderer parameters * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false @@ -37,7 +37,7 @@ * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ - constructor(system, width, height, options) + constructor(system, screenWidth, screenHeight, options) { super(); @@ -69,20 +69,13 @@ this.type = RENDERER_TYPE.UNKNOWN; /** - * The width of the canvas view + * Measurements of the screen. (0, 0, screenWidth, screenHeight) * - * @member {number} - * @default 800 - */ - this.width = width || 800; - - /** - * The height of the canvas view + * Its safe to use as filterArea or hitArea for whole stage * - * @member {number} - * @default 600 + * @member {PIXI.Rectangle} */ - this.height = height || 600; + this.screen = new Rectangle(0, 0, screenWidth || 800, screenHeight || 600); /** * The canvas element that everything is drawn to @@ -107,7 +100,7 @@ this.transparent = options.transparent; /** - * Whether the render view should be resized automatically + * Whether css dimensions of canvas view should be resized to screen dimensions automatically * * @member {boolean} */ @@ -192,23 +185,48 @@ } /** - * Resizes the canvas view to the specified width and height + * Same as view.width, actual number of pixels in the canvas by horizontal * - * @param {number} width - the new width of the canvas view - * @param {number} height - the new height of the canvas view + * @member {number} + * @readonly + * @default 800 */ - resize(width, height) + get width() { - this.width = width * this.resolution; - this.height = height * this.resolution; + return this.view.width; + } - this.view.width = this.width; - this.view.height = this.height; + /** + * Same as view.height, actual number of pixels in the canvas by vertical + * + * @member {number} + * @readonly + * @default 600 + */ + get height() + { + return this.view.height; + } + + /** + * Resizes the screen and canvas to the specified width and height + * Canvas dimensions are multiplied by resolution + * + * @param {number} screenWidth - the new width of the screen + * @param {number} screenHeight - the new height of the screen + */ + resize(screenWidth, screenHeight) + { + this.screen.width = screenWidth; + this.screen.height = screenHeight; + + this.view.width = screenWidth * this.resolution; + this.view.height = screenHeight * this.resolution; if (this.autoResize) { - this.view.style.width = `${this.width / this.resolution}px`; - this.view.style.height = `${this.height / this.resolution}px`; + this.view.style.width = `${screenWidth}px`; + this.view.style.height = `${screenHeight}px`; } } @@ -249,11 +267,10 @@ this.type = RENDERER_TYPE.UNKNOWN; - this.width = 0; - this.height = 0; - this.view = null; + this.screen = null; + this.resolution = 0; this.transparent = false; diff --git a/src/core/Application.js b/src/core/Application.js index 708b718..174deb4 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -98,6 +98,16 @@ } /** + * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen + * @member {PIXI.Rectangle} + * @readonly + */ + get screen() + { + return this.renderer.screen; + } + + /** * Destroy and don't use after this. * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. */ diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index fa116a6..a24c775 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -1,5 +1,5 @@ import { sayHello, hex2string, hex2rgb } from '../utils'; -import { Matrix } from '../math'; +import { Matrix, Rectangle } from '../math'; import { RENDERER_TYPE } from '../const'; import settings from '../settings'; import Container from '../display/Container'; @@ -21,8 +21,8 @@ { /** * @param {string} system - The name of the system this renderer is for. - * @param {number} [width=800] - the width of the canvas view - * @param {number} [height=600] - the height of the canvas view + * @param {number} [screenWidth=800] - the width of the screen + * @param {number} [screenHeight=600] - the height of the screen * @param {object} [options] - The optional renderer parameters * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false @@ -37,7 +37,7 @@ * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ - constructor(system, width, height, options) + constructor(system, screenWidth, screenHeight, options) { super(); @@ -69,20 +69,13 @@ this.type = RENDERER_TYPE.UNKNOWN; /** - * The width of the canvas view + * Measurements of the screen. (0, 0, screenWidth, screenHeight) * - * @member {number} - * @default 800 - */ - this.width = width || 800; - - /** - * The height of the canvas view + * Its safe to use as filterArea or hitArea for whole stage * - * @member {number} - * @default 600 + * @member {PIXI.Rectangle} */ - this.height = height || 600; + this.screen = new Rectangle(0, 0, screenWidth || 800, screenHeight || 600); /** * The canvas element that everything is drawn to @@ -107,7 +100,7 @@ this.transparent = options.transparent; /** - * Whether the render view should be resized automatically + * Whether css dimensions of canvas view should be resized to screen dimensions automatically * * @member {boolean} */ @@ -192,23 +185,48 @@ } /** - * Resizes the canvas view to the specified width and height + * Same as view.width, actual number of pixels in the canvas by horizontal * - * @param {number} width - the new width of the canvas view - * @param {number} height - the new height of the canvas view + * @member {number} + * @readonly + * @default 800 */ - resize(width, height) + get width() { - this.width = width * this.resolution; - this.height = height * this.resolution; + return this.view.width; + } - this.view.width = this.width; - this.view.height = this.height; + /** + * Same as view.height, actual number of pixels in the canvas by vertical + * + * @member {number} + * @readonly + * @default 600 + */ + get height() + { + return this.view.height; + } + + /** + * Resizes the screen and canvas to the specified width and height + * Canvas dimensions are multiplied by resolution + * + * @param {number} screenWidth - the new width of the screen + * @param {number} screenHeight - the new height of the screen + */ + resize(screenWidth, screenHeight) + { + this.screen.width = screenWidth; + this.screen.height = screenHeight; + + this.view.width = screenWidth * this.resolution; + this.view.height = screenHeight * this.resolution; if (this.autoResize) { - this.view.style.width = `${this.width / this.resolution}px`; - this.view.style.height = `${this.height / this.resolution}px`; + this.view.style.width = `${screenWidth}px`; + this.view.style.height = `${screenHeight}px`; } } @@ -249,11 +267,10 @@ this.type = RENDERER_TYPE.UNKNOWN; - this.width = 0; - this.height = 0; - this.view = null; + this.screen = null; + this.resolution = 0; this.transparent = false; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 1bd2d5e..e84e49c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -18,8 +18,8 @@ export default class CanvasRenderer extends SystemRenderer { /** - * @param {number} [width=800] - the width of the canvas view - * @param {number} [height=600] - the height of the canvas view + * @param {number} [screenWidth=800] - the width of the screen + * @param {number} [screenHeight=600] - the height of the screen * @param {object} [options] - The optional renderer parameters * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false @@ -34,9 +34,9 @@ * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ - constructor(width, height, options = {}) + constructor(screenWidth, screenHeight, options = {}) { - super('Canvas', width, height, options); + super('Canvas', screenWidth, screenHeight, options); this.type = RENDERER_TYPE.CANVAS; @@ -96,7 +96,7 @@ this.context = null; this.renderingToScreen = false; - this.resize(width, height); + this.resize(screenWidth, screenHeight); } /** @@ -283,12 +283,12 @@ * * @extends PIXI.SystemRenderer#resize * - * @param {number} width - The new width of the canvas view - * @param {number} height - The new height of the canvas view + * @param {number} screenWidth - the new width of the screen + * @param {number} screenHeight - the new height of the screen */ - resize(width, height) + resize(screenWidth, screenHeight) { - super.resize(width, height); + super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. // surely a browser bug?? Let pixi fix that for you.. diff --git a/src/core/Application.js b/src/core/Application.js index 708b718..174deb4 100644 --- a/src/core/Application.js +++ b/src/core/Application.js @@ -98,6 +98,16 @@ } /** + * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen + * @member {PIXI.Rectangle} + * @readonly + */ + get screen() + { + return this.renderer.screen; + } + + /** * Destroy and don't use after this. * @param {Boolean} [removeView=false] Automatically remove canvas from DOM. */ diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index fa116a6..a24c775 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -1,5 +1,5 @@ import { sayHello, hex2string, hex2rgb } from '../utils'; -import { Matrix } from '../math'; +import { Matrix, Rectangle } from '../math'; import { RENDERER_TYPE } from '../const'; import settings from '../settings'; import Container from '../display/Container'; @@ -21,8 +21,8 @@ { /** * @param {string} system - The name of the system this renderer is for. - * @param {number} [width=800] - the width of the canvas view - * @param {number} [height=600] - the height of the canvas view + * @param {number} [screenWidth=800] - the width of the screen + * @param {number} [screenHeight=600] - the height of the screen * @param {object} [options] - The optional renderer parameters * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false @@ -37,7 +37,7 @@ * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ - constructor(system, width, height, options) + constructor(system, screenWidth, screenHeight, options) { super(); @@ -69,20 +69,13 @@ this.type = RENDERER_TYPE.UNKNOWN; /** - * The width of the canvas view + * Measurements of the screen. (0, 0, screenWidth, screenHeight) * - * @member {number} - * @default 800 - */ - this.width = width || 800; - - /** - * The height of the canvas view + * Its safe to use as filterArea or hitArea for whole stage * - * @member {number} - * @default 600 + * @member {PIXI.Rectangle} */ - this.height = height || 600; + this.screen = new Rectangle(0, 0, screenWidth || 800, screenHeight || 600); /** * The canvas element that everything is drawn to @@ -107,7 +100,7 @@ this.transparent = options.transparent; /** - * Whether the render view should be resized automatically + * Whether css dimensions of canvas view should be resized to screen dimensions automatically * * @member {boolean} */ @@ -192,23 +185,48 @@ } /** - * Resizes the canvas view to the specified width and height + * Same as view.width, actual number of pixels in the canvas by horizontal * - * @param {number} width - the new width of the canvas view - * @param {number} height - the new height of the canvas view + * @member {number} + * @readonly + * @default 800 */ - resize(width, height) + get width() { - this.width = width * this.resolution; - this.height = height * this.resolution; + return this.view.width; + } - this.view.width = this.width; - this.view.height = this.height; + /** + * Same as view.height, actual number of pixels in the canvas by vertical + * + * @member {number} + * @readonly + * @default 600 + */ + get height() + { + return this.view.height; + } + + /** + * Resizes the screen and canvas to the specified width and height + * Canvas dimensions are multiplied by resolution + * + * @param {number} screenWidth - the new width of the screen + * @param {number} screenHeight - the new height of the screen + */ + resize(screenWidth, screenHeight) + { + this.screen.width = screenWidth; + this.screen.height = screenHeight; + + this.view.width = screenWidth * this.resolution; + this.view.height = screenHeight * this.resolution; if (this.autoResize) { - this.view.style.width = `${this.width / this.resolution}px`; - this.view.style.height = `${this.height / this.resolution}px`; + this.view.style.width = `${screenWidth}px`; + this.view.style.height = `${screenHeight}px`; } } @@ -249,11 +267,10 @@ this.type = RENDERER_TYPE.UNKNOWN; - this.width = 0; - this.height = 0; - this.view = null; + this.screen = null; + this.resolution = 0; this.transparent = false; diff --git a/src/core/renderers/canvas/CanvasRenderer.js b/src/core/renderers/canvas/CanvasRenderer.js index 1bd2d5e..e84e49c 100644 --- a/src/core/renderers/canvas/CanvasRenderer.js +++ b/src/core/renderers/canvas/CanvasRenderer.js @@ -18,8 +18,8 @@ export default class CanvasRenderer extends SystemRenderer { /** - * @param {number} [width=800] - the width of the canvas view - * @param {number} [height=600] - the height of the canvas view + * @param {number} [screenWidth=800] - the width of the screen + * @param {number} [screenHeight=600] - the height of the screen * @param {object} [options] - The optional renderer parameters * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false @@ -34,9 +34,9 @@ * @param {boolean} [options.roundPixels=false] - If true Pixi will Math.floor() x/y values when rendering, * stopping pixel interpolation. */ - constructor(width, height, options = {}) + constructor(screenWidth, screenHeight, options = {}) { - super('Canvas', width, height, options); + super('Canvas', screenWidth, screenHeight, options); this.type = RENDERER_TYPE.CANVAS; @@ -96,7 +96,7 @@ this.context = null; this.renderingToScreen = false; - this.resize(width, height); + this.resize(screenWidth, screenHeight); } /** @@ -283,12 +283,12 @@ * * @extends PIXI.SystemRenderer#resize * - * @param {number} width - The new width of the canvas view - * @param {number} height - The new height of the canvas view + * @param {number} screenWidth - the new width of the screen + * @param {number} screenHeight - the new height of the screen */ - resize(width, height) + resize(screenWidth, screenHeight) { - super.resize(width, height); + super.resize(screenWidth, screenHeight); // reset the scale mode.. oddly this seems to be reset when the canvas is resized. // surely a browser bug?? Let pixi fix that for you.. diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 75ae9b5..e87973c 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -30,8 +30,8 @@ { /** * - * @param {number} [width=0] - the width of the canvas view - * @param {number} [height=0] - the height of the canvas view + * @param {number} [screenWidth=800] - the width of the screen + * @param {number} [screenHeight=600] - the height of the screen * @param {object} [options] - The optional renderer parameters * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional * @param {boolean} [options.transparent=false] - If the render view is transparent, default false @@ -52,9 +52,9 @@ * @param {boolean} [options.legacy=false] - If true Pixi will aim to ensure compatibility * with older / less advanced devices. If you experiance unexplained flickering try setting this to true. */ - constructor(width, height, options = {}) + constructor(screenWidth, screenHeight, options = {}) { - super('WebGL', width, height, options); + super('WebGL', screenWidth, screenHeight, options); this.legacy = !!options.legacy; @@ -238,7 +238,7 @@ this.emit('context', gl); // setup the width/height properties and gl viewport - this.resize(this.width, this.height); + this.resize(this.screen.width, this.screen.height); } /** @@ -332,16 +332,16 @@ /** * Resizes the webGL view to the specified width and height. * - * @param {number} width - the new width of the webGL view - * @param {number} height - the new height of the webGL view + * @param {number} screenWidth - the new width of the screen + * @param {number} screenHeight - the new height of the screen */ - resize(width, height) + resize(screenWidth, screenHeight) { // if(width * this.resolution === this.width && height * this.resolution === this.height)return; - SystemRenderer.prototype.resize.call(this, width, height); + SystemRenderer.prototype.resize.call(this, screenWidth, screenHeight); - this.rootRenderTarget.resize(width, height); + this.rootRenderTarget.resize(screenWidth, screenHeight); if (this._activeRenderTarget === this.rootRenderTarget) {