Phaser.Game constructor can now be passed a single object containing game settings + Stage settings, useful for advanced configurations.

Author: photonstorm

README.md

@@ -53,6 +53,8 @@ Significant API changes:
 
 New features:
 
+* Phaser.Game constructor can now be passed a single object containing game settings + Stage settings, useful for advanced configurations.
+* The width/height given to Phaser.Game can now be percentages, i.e. "100%" will set the width to the maximum window innerWidth.
 * Added a stage.fullScreenScaleMode property to determine scaling when fullscreen (thanks oysterCrusher)
 * Added support for margin and spacing around a frame in Loader.spritesheet.
 * Added Device.vibration to check if the Vibration API is available or not.
@@ -63,6 +65,7 @@ New features:
 * You can now load any binary file via the Loader: game.load.binary(key, url, callback) - the optional callback allows for post-load processing before entering the Cache.
 * Group.set will let you deep set a new propery on a single child of the Group.
 * Stage.display property added. A direct reference to the root Pixi Stage object (very useful for RenderTexture manipulation)
+* Added Ejecta detection to Device (thanks endel)
 
 
 New Examples:

examples/wip/rendertexture1.js

@@ -1,5 +1,16 @@
 
-var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update });
+var config = {
+
+	width: "100%",
+	height: "100%",
+	renderer: Phaser.WEBGL,
+	parent: 'phaser-example',
+	state: { preload: preload, create: create, update: update },
+	backgroundColor: '#ff0000'
+
+};
+
+var game = new Phaser.Game(config);
 
 function preload() {
 
@@ -24,20 +35,20 @@ var count = 0;
 function create() {
 
 	// create two render textures.. these dynamic textures will be used to draw the scene into itself
-	renderTexture = game.add.renderTexture('texture1', 800, 600);
-	renderTexture2 = game.add.renderTexture('textur2e', 800, 600);
+	renderTexture = game.add.renderTexture('texture1', game.width, game.height);
+	renderTexture2 = game.add.renderTexture('textur2e', game.width, game.height);
 	currentTexture = renderTexture;
 
 	// create a new sprite that uses the render texture we created above
-	outputSprite = game.add.sprite(400, 300, currentTexture);
+	outputSprite = game.add.sprite(game.width/2, game.height/2, currentTexture);
 
 	// align the sprite
 	outputSprite.anchor.x = 0.5;
 	outputSprite.anchor.y = 0.5;
 
 	stuffContainer = game.add.group();
-	stuffContainer.x = 800/2;
-	stuffContainer.y = 600/2
+	stuffContainer.x = game.width/2;
+	stuffContainer.y = game.height/2;
 
 	// now create some items and randomly position them in the stuff container
 	for (var i = 0; i < 20; i++)

src/core/Game.js

@@ -24,55 +24,61 @@
 */
 Phaser.Game = function (width, height, renderer, parent, state, transparent, antialias) {
 
-    width = width || 800;
-    height = height || 600;
-    renderer = renderer || Phaser.AUTO;
-    parent = parent || '';
-    state = state || null;
-
-    if (typeof transparent === 'undefined') { transparent = false; }
-    if (typeof antialias === 'undefined') { antialias = true; }
-
     /**
     * @property {number} id - Phaser Game ID (for when Pixi supports multiple instances).
     */
     this.id = Phaser.GAMES.push(this) - 1;
 
+    /**
+    * @property {object} config - The Phaser.Game configuration object.
+    */
+    this.config = null;
+
     /**
     * @property {HTMLElement} parent - The Games DOM parent.
+    * @default
     */
-    this.parent = parent;
+    this.parent = '';
 
     /**
     * @property {number} width - The Game width (in pixels).
+    * @default
     */
-    this.width = width;
+    this.width = 800;
 
     /**
     * @property {number} height - The Game height (in pixels).
+    * @default
     */
-    this.height = height;
+    this.height = 600;
 
     /**
     * @property {boolean} transparent - Use a transparent canvas background or not.
+    * @default
     */
-    this.transparent = transparent;
+    this.transparent = false;
 
     /**
     * @property {boolean} antialias - Anti-alias graphics (in WebGL this helps with edges, in Canvas2D it retains pixel-art quality).
+    * @default
     */
-    this.antialias = antialias;
+    this.antialias = true;
 
     /**
     * @property {number} renderer - The Pixi Renderer
     * @default
     */
-    this.renderer = null;
+    this.renderer = Phaser.AUTO;
+
+    /**
+    * @property {number} renderType - The Renderer this Phaser.Game will use. Either Phaser.RENDERER_AUTO, Phaser.RENDERER_CANVAS or Phaser.RENDERER_WEBGL.
+    */
+    this.renderType = Phaser.AUTO;
 
     /**
     * @property {number} state - The StateManager.
     */
-    this.state = new Phaser.StateManager(this, state);
+    this.state = null;
 
     /**
     * @property {boolean} _paused - Is game paused?
@@ -81,11 +87,6 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
     */
     this._paused = false;
 
-    /**
-    * @property {number} renderType - The Renderer this Phaser.Game will use. Either Phaser.RENDERER_AUTO, Phaser.RENDERER_CANVAS or Phaser.RENDERER_WEBGL.
-    */
-    this.renderType = renderer;
-
     /**
     * @property {boolean} _loadComplete - Whether load complete loading or not.
     * @private
@@ -225,6 +226,47 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
     */
     this.particles = null;
 
+    //  Parse the configuration object (if any)
+    if (arguments.length === 1 && typeof arguments[0] === 'object')
+    {
+        this.parseConfig(arguments[0]);
+    }
+    else
+    {
+        if (typeof width !== 'undefined')
+        {
+            this.width = width;
+        }
+
+        if (typeof height !== 'undefined')
+        {
+            this.height = height;
+        }
+
+        if (typeof renderer !== 'undefined')
+        {
+            this.renderer = renderer;
+            this.renderType = renderer;
+        }
+
+        if (typeof parent !== 'undefined')
+        {
+            this.parent = parent;
+        }
+
+        if (typeof transparent !== 'undefined')
+        {
+            this.transparent = transparent;
+        }
+
+        if (typeof antialias !== 'undefined')
+        {
+            this.antialias = antialias;
+        }
+
+        this.state = new Phaser.StateManager(this, state);
+    }
+
     var _this = this;
 
     this._onBoot = function () {
@@ -247,6 +289,99 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
 
 Phaser.Game.prototype = {
 
+    /**
+    * Parses a Game configuration object.
+    *
+    * @method Phaser.Game#parseConfig
+    * @protected
+    */
+    parseConfig: function (config) {
+
+        this.config = config;
+
+        if (config['width'])
+        {
+            this.width = this.parseDimension(config['width'], 0);
+        }
+
+        if (config['height'])
+        {
+            this.height = this.parseDimension(config['height'], 1);
+        }
+
+        if (config['renderer'])
+        {
+            this.renderer = config['renderer'];
+            this.renderType = config['renderer'];
+        }
+
+        if (config['parent'])
+        {
+            this.parent = config['parent'];
+        }
+
+        if (config['transparent'])
+        {
+            this.transparent = config['transparent'];
+        }
+
+        if (config['antialias'])
+        {
+            this.antialias = config['antialias'];
+        }
+
+        var state = null;
+
+        if (config['state'])
+        {
+            state = config['state'];
+        }
+
+        this.state = new Phaser.StateManager(this, state);
+
+    },
+
+    /**
+    * Get dimension.
+    *
+    * @method Phaser.Game#parseDimension
+    * @protected
+    */
+    parseDimension: function (size, dimension) {
+
+        var f = 0;
+        var px = 0;
+
+        if (typeof size === 'string')
+        {
+            //  %?
+            if (size.substr(-1) === '%')
+            {
+                f = parseInt(size, 10) / 100;
+
+                if (dimension === 0)
+                {
+                    px = window.innerWidth * f;
+                }
+                else
+                {
+                    px = window.innerHeight * f;
+                }
+            }
+            else
+            {
+                px = parseInt(size, 10);
+            }
+        }
+        else
+        {
+            px = size;
+        }
+
+        return px;
+
+    },
+
     /**
     * Initialize engine sub modules and start the game.
     *

src/core/Stage.js

@@ -24,7 +24,6 @@ Phaser.Stage = function (game, width, height) {
     /**
     * @property {string} game - Background color of the stage (defaults to black). Set via the public backgroundColor property.
     * @private
-    * @default 'rgb(0,0,0)'
     */
     this._backgroundColor = 'rgb(0,0,0)';
 
@@ -34,10 +33,9 @@ Phaser.Stage = function (game, width, height) {
     this.offset = new Phaser.Point();
 
     /**
-    * @property {HTMLCanvasElement} canvas - Reference to the newly created <canvas> element.
+    * @property {HTMLCanvasElement} canvas - Reference to the newly created `canvas` element.
     */
-    this.canvas = Phaser.Canvas.create(width, height);
-    this.canvas.style['-webkit-full-screen'] = 'width: 100%; height: 100%';
+    this.canvas = null;
 
     /**
     * @property {PIXI.Stage} _stage - The Pixi Stage which is hooked to the renderer.
@@ -90,10 +88,73 @@ Phaser.Stage = function (game, width, height) {
     */
     this.checkOffsetInterval = 2500;
 
+    if (game.config)
+    {
+        this.parseConfig(game.config);
+    }
+    else
+    {
+        this.canvas = Phaser.Canvas.create(width, height);
+        this.canvas.style['-webkit-full-screen'] = 'width: 100%; height: 100%';
+    }
+
 };
 
 Phaser.Stage.prototype = {
 
+    /**
+    * Parses a Game configuration object.
+    *
+    * @method Phaser.Stage#parseConfig
+    * @protected
+    */
+    parseConfig: function (config) {
+
+        if (config['canvasID'])
+        {
+            this.canvas = Phaser.Canvas.create(this.game.width, this.game.height, config['canvasID']);
+        }
+        else
+        {
+            this.canvas = Phaser.Canvas.create(this.game.width, this.game.height);
+        }
+
+        if (config['canvasStyle'])
+        {
+            this.canvas.stlye = config['canvasStyle'];
+        }
+        else
+        {
+            this.canvas.style['-webkit-full-screen'] = 'width: 100%; height: 100%';
+        }
+
+        if (config['checkOffsetInterval'])
+        {
+            this.checkOffsetInterval = config['checkOffsetInterval'];
+        }
+
+        if (config['disableVisibilityChange'])
+        {
+            this.disableVisibilityChange = config['disableVisibilityChange'];
+        }
+
+        if (config['fullScreenScaleMode'])
+        {
+            this.fullScreenScaleMode = config['fullScreenScaleMode'];
+        }
+
+        if (config['scaleMode'])
+        {
+            this.scaleMode = config['scaleMode'];
+        }
+
+        if (config['backgroundColor'])
+        {
+            this.backgroundColor = config['backgroundColor'];
+        }
+
+    },
+
     /**
     * Initialises the stage and adds the event listeners.
     * @method Phaser.Stage#boot