diff --git a/src/pixi/Pixi.js b/src/pixi/Pixi.js index 1eb1010..243c6e1 100644 --- a/src/pixi/Pixi.js +++ b/src/pixi/Pixi.js @@ -81,7 +81,8 @@ antialias:false, preserveDrawingBuffer:false, resolution:1, - clearBeforeRender:true + clearBeforeRender:true, + autoResize:false } PIXI.sayHello = function (type) diff --git a/src/pixi/Pixi.js b/src/pixi/Pixi.js index 1eb1010..243c6e1 100644 --- a/src/pixi/Pixi.js +++ b/src/pixi/Pixi.js @@ -81,7 +81,8 @@ antialias:false, preserveDrawingBuffer:false, resolution:1, - clearBeforeRender:true + clearBeforeRender:true, + autoResize:false } PIXI.sayHello = function (type) diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index 0bdd3e6..3d5e1c0 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -13,6 +13,7 @@ * @param [options] {Object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.autoResize=false] {Boolean} If the render view is automatically resized, default false * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 * @param [options.clearBeforeRender=true] {Boolean} This sets if the CanvasRenderer will clear the canvas or not before the new render pass. */ @@ -71,7 +72,16 @@ * @type Boolean */ this.transparent = options.transparent; - + + /** + * Whether the render view should be resized automatically + * + * @property autoResize + * @type Boolean + */ + this.autoResize = options.autoResize || false; + + /** * The width of the canvas view * @@ -257,8 +267,10 @@ this.view.width = this.width; this.view.height = this.height; - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + if (this.autoResize) { + this.view.style.width = this.width / this.resolution + "px"; + this.view.style.height = this.height / this.resolution + "px"; + } }; /** diff --git a/src/pixi/Pixi.js b/src/pixi/Pixi.js index 1eb1010..243c6e1 100644 --- a/src/pixi/Pixi.js +++ b/src/pixi/Pixi.js @@ -81,7 +81,8 @@ antialias:false, preserveDrawingBuffer:false, resolution:1, - clearBeforeRender:true + clearBeforeRender:true, + autoResize:false } PIXI.sayHello = function (type) diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index 0bdd3e6..3d5e1c0 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -13,6 +13,7 @@ * @param [options] {Object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.autoResize=false] {Boolean} If the render view is automatically resized, default false * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 * @param [options.clearBeforeRender=true] {Boolean} This sets if the CanvasRenderer will clear the canvas or not before the new render pass. */ @@ -71,7 +72,16 @@ * @type Boolean */ this.transparent = options.transparent; - + + /** + * Whether the render view should be resized automatically + * + * @property autoResize + * @type Boolean + */ + this.autoResize = options.autoResize || false; + + /** * The width of the canvas view * @@ -257,8 +267,10 @@ this.view.width = this.width; this.view.height = this.height; - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + if (this.autoResize) { + this.view.style.width = this.width / this.resolution + "px"; + this.view.style.height = this.height / this.resolution + "px"; + } }; /** diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 2357000..f64d452 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -17,6 +17,7 @@ * @param [options] {Object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.autoResize=false] {Boolean} If the render view is automatically resized, default false * @param [options.antialias=false] {Boolean} sets antialias (only applicable in chrome at the moment) * @param [options.preserveDrawingBuffer=false] {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 @@ -67,6 +68,14 @@ this.transparent = options.transparent; /** + * Whether the render view should be resized automatically + * + * @property autoResize + * @type Boolean + */ + this.autoResize = options.autoResize || false; + + /** * The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering. * * @property preserveDrawingBuffer @@ -378,6 +387,11 @@ this.view.width = this.width; this.view.height = this.height; + if (this.autoResize) { + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; + } + this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; diff --git a/src/pixi/Pixi.js b/src/pixi/Pixi.js index 1eb1010..243c6e1 100644 --- a/src/pixi/Pixi.js +++ b/src/pixi/Pixi.js @@ -81,7 +81,8 @@ antialias:false, preserveDrawingBuffer:false, resolution:1, - clearBeforeRender:true + clearBeforeRender:true, + autoResize:false } PIXI.sayHello = function (type) diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index 0bdd3e6..3d5e1c0 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -13,6 +13,7 @@ * @param [options] {Object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.autoResize=false] {Boolean} If the render view is automatically resized, default false * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 * @param [options.clearBeforeRender=true] {Boolean} This sets if the CanvasRenderer will clear the canvas or not before the new render pass. */ @@ -71,7 +72,16 @@ * @type Boolean */ this.transparent = options.transparent; - + + /** + * Whether the render view should be resized automatically + * + * @property autoResize + * @type Boolean + */ + this.autoResize = options.autoResize || false; + + /** * The width of the canvas view * @@ -257,8 +267,10 @@ this.view.width = this.width; this.view.height = this.height; - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + if (this.autoResize) { + this.view.style.width = this.width / this.resolution + "px"; + this.view.style.height = this.height / this.resolution + "px"; + } }; /** diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 2357000..f64d452 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -17,6 +17,7 @@ * @param [options] {Object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.autoResize=false] {Boolean} If the render view is automatically resized, default false * @param [options.antialias=false] {Boolean} sets antialias (only applicable in chrome at the moment) * @param [options.preserveDrawingBuffer=false] {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 @@ -67,6 +68,14 @@ this.transparent = options.transparent; /** + * Whether the render view should be resized automatically + * + * @property autoResize + * @type Boolean + */ + this.autoResize = options.autoResize || false; + + /** * The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering. * * @property preserveDrawingBuffer @@ -378,6 +387,11 @@ this.view.width = this.width; this.view.height = this.height; + if (this.autoResize) { + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; + } + this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; diff --git a/test/unit/pixi/renderers/canvas/CanvasRenderer.js b/test/unit/pixi/renderers/canvas/CanvasRenderer.js index df3a12f..1646444 100644 --- a/test/unit/pixi/renderers/canvas/CanvasRenderer.js +++ b/test/unit/pixi/renderers/canvas/CanvasRenderer.js @@ -7,4 +7,30 @@ it('Module exists', function () { expect(CanvasRenderer).to.be.a('function'); }); + + describe('.autoResize', function () { + it('Should automatically resize view if enabled', function () { + var renderer = new CanvasRenderer(200, 200, { + autoResize: true + }); + + expect(renderer.view.style.width).to.equal('200px'); + }); + + it('Should not automatically resize view if disabled', function () { + var renderer = new CanvasRenderer(200, 200, { + autoResize: false + }); + + expect(renderer.view.style.width).to.equal(''); + }); + + it('Should not automatically resize view if not specified', function () { + var renderer = new CanvasRenderer(200, 200, { + resolution: 2 + }); + + expect(renderer.view.style.width).to.equal(''); + }); + }); }); diff --git a/src/pixi/Pixi.js b/src/pixi/Pixi.js index 1eb1010..243c6e1 100644 --- a/src/pixi/Pixi.js +++ b/src/pixi/Pixi.js @@ -81,7 +81,8 @@ antialias:false, preserveDrawingBuffer:false, resolution:1, - clearBeforeRender:true + clearBeforeRender:true, + autoResize:false } PIXI.sayHello = function (type) diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index 0bdd3e6..3d5e1c0 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -13,6 +13,7 @@ * @param [options] {Object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.autoResize=false] {Boolean} If the render view is automatically resized, default false * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 * @param [options.clearBeforeRender=true] {Boolean} This sets if the CanvasRenderer will clear the canvas or not before the new render pass. */ @@ -71,7 +72,16 @@ * @type Boolean */ this.transparent = options.transparent; - + + /** + * Whether the render view should be resized automatically + * + * @property autoResize + * @type Boolean + */ + this.autoResize = options.autoResize || false; + + /** * The width of the canvas view * @@ -257,8 +267,10 @@ this.view.width = this.width; this.view.height = this.height; - this.view.style.width = this.width / this.resolution + "px"; - this.view.style.height = this.height / this.resolution + "px"; + if (this.autoResize) { + this.view.style.width = this.width / this.resolution + "px"; + this.view.style.height = this.height / this.resolution + "px"; + } }; /** diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 2357000..f64d452 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -17,6 +17,7 @@ * @param [options] {Object} The optional renderer parameters * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.autoResize=false] {Boolean} If the render view is automatically resized, default false * @param [options.antialias=false] {Boolean} sets antialias (only applicable in chrome at the moment) * @param [options.preserveDrawingBuffer=false] {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 @@ -67,6 +68,14 @@ this.transparent = options.transparent; /** + * Whether the render view should be resized automatically + * + * @property autoResize + * @type Boolean + */ + this.autoResize = options.autoResize || false; + + /** * The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering. * * @property preserveDrawingBuffer @@ -378,6 +387,11 @@ this.view.width = this.width; this.view.height = this.height; + if (this.autoResize) { + this.view.style.width = this.width / this.resolution + 'px'; + this.view.style.height = this.height / this.resolution + 'px'; + } + this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; diff --git a/test/unit/pixi/renderers/canvas/CanvasRenderer.js b/test/unit/pixi/renderers/canvas/CanvasRenderer.js index df3a12f..1646444 100644 --- a/test/unit/pixi/renderers/canvas/CanvasRenderer.js +++ b/test/unit/pixi/renderers/canvas/CanvasRenderer.js @@ -7,4 +7,30 @@ it('Module exists', function () { expect(CanvasRenderer).to.be.a('function'); }); + + describe('.autoResize', function () { + it('Should automatically resize view if enabled', function () { + var renderer = new CanvasRenderer(200, 200, { + autoResize: true + }); + + expect(renderer.view.style.width).to.equal('200px'); + }); + + it('Should not automatically resize view if disabled', function () { + var renderer = new CanvasRenderer(200, 200, { + autoResize: false + }); + + expect(renderer.view.style.width).to.equal(''); + }); + + it('Should not automatically resize view if not specified', function () { + var renderer = new CanvasRenderer(200, 200, { + resolution: 2 + }); + + expect(renderer.view.style.width).to.equal(''); + }); + }); }); diff --git a/test/unit/pixi/renderers/webgl/WebGLRenderer.js b/test/unit/pixi/renderers/webgl/WebGLRenderer.js index 1753064..1680a80 100644 --- a/test/unit/pixi/renderers/webgl/WebGLRenderer.js +++ b/test/unit/pixi/renderers/webgl/WebGLRenderer.js @@ -8,14 +8,42 @@ expect(WebGLRenderer).to.be.a('function'); }); - it('Destroy renderer', function () { - var renderer; - try { - renderer = new PIXI.WebGLRenderer(400, 300, {}); - } catch (error) { - // Cannot test destroy method if we cannot create WebGLRenderer - return; - } + // Skip tests if WebGL is not available (WebGL not supported in Travis CI) + try { + var renderer = new WebGLRenderer(400, 300, {}); renderer.destroy(); + } catch (error) { + return; + } + + it('Destroy renderer', function () { + var renderer = new WebGLRenderer(400, 300, {}); + renderer.destroy(); + }); + + describe('.autoResize', function () { + it('Should automatically resize view if enabled', function () { + var renderer = new WebGLRenderer(200, 200, { + autoResize: true + }); + + expect(renderer.view.style.width).to.equal('200px'); + }); + + it('Should not automatically resize view if disabled', function () { + var renderer = new WebGLRenderer(200, 200, { + autoResize: false + }); + + expect(renderer.view.style.width).to.equal(''); + }); + + it('Should not automatically resize view if not specified', function () { + var renderer = new WebGLRenderer(200, 200, { + resolution: 2 + }); + + expect(renderer.view.style.width).to.equal(''); + }); }); });