diff --git a/README.md b/README.md index 98ebf75b..614e61bd 100644 --- a/README.md +++ b/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: diff --git a/examples/wip/rendertexture1.js b/examples/wip/rendertexture1.js index 83f1b89d..02f14549 100644 --- a/examples/wip/rendertexture1.js +++ b/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++) diff --git a/src/core/Game.js b/src/core/Game.js index 0f9f3618..67ceac99 100644 --- a/src/core/Game.js +++ b/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 {HTMLElement} parent - The Games DOM parent. + * @property {object} config - The Phaser.Game configuration object. */ - this.parent = parent; + this.config = null; + + /** + * @property {HTMLElement} parent - The Games DOM parent. + * @default + */ + 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. * diff --git a/src/core/Stage.js b/src/core/Stage.js index 83c0e804..c1eaf0eb 100644 --- a/src/core/Stage.js +++ b/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 diff --git a/src/core/StateManager.js b/src/core/StateManager.js index ef61ed26..dfe3dcf3 100644 --- a/src/core/StateManager.js +++ b/src/core/StateManager.js @@ -32,7 +32,7 @@ Phaser.StateManager = function (game, pendingState) { */ this._pendingState = null; - if (pendingState !== null) + if (typeof pendingState !== 'undefined' && pendingState !== null) { this._pendingState = pendingState; } diff --git a/src/loader/Loader.js b/src/loader/Loader.js index 1374a23c..c8cba89e 100644 --- a/src/loader/Loader.js +++ b/src/loader/Loader.js @@ -411,35 +411,6 @@ Phaser.Loader.prototype = { }, - /** - * Add a new tile set to the loader. These are used in the rendering of tile maps. - * - * @method Phaser.Loader#tileset - * @param {string} key - Unique asset key of the tileset file. - * @param {string} url - URL of the tileset. - * @param {number} tileWidth - Width of each single tile in pixels. - * @param {number} tileHeight - Height of each single tile in pixels. - * @param {number} [tileMargin=0] - If the tiles have been drawn with a margin, specify the amount here. - * @param {number} [tileSpacing=0] - If the tiles have been drawn with spacing between them, specify the amount here. - * @param {number} [rows=-1] - How many tiles are placed horizontally in each row? If -1 it will calculate rows by dividing the image width by tileWidth. - * @param {number} [columns=-1] - How many tiles are placed vertically in each column? If -1 it will calculate columns by dividing the image height by tileHeight. - * @param {number} [total=-1] - The maximum number of tiles to extract from the image. If -1 it will extract `rows * columns` worth. You can also set a value lower than the actual number of tiles. - * @return {Phaser.Loader} This Loader instance. - */ - tileset: function (key, url, tileWidth, tileHeight, tileMargin, tileSpacing, rows, columns, total) { - - if (typeof tileMargin === "undefined") { tileMargin = 0; } - if (typeof tileSpacing === "undefined") { tileSpacing = 0; } - if (typeof rows === "undefined") { rows = -1; } - if (typeof columns === "undefined") { columns = -1; } - if (typeof total === "undefined") { total = -1; } - - this.addToFileList('tileset', key, url, { tileWidth: tileWidth, tileHeight: tileHeight, tileMargin: tileMargin, tileSpacing: tileSpacing, rows: rows, columns: columns, total: total }); - - return this; - - }, - /** * Add a new audio file to the loader. * @@ -786,7 +757,6 @@ Phaser.Loader.prototype = { case 'spritesheet': case 'textureatlas': case 'bitmapfont': - case 'tileset': file.data = new Image(); file.data.name = file.key; file.data.onload = function () { @@ -983,11 +953,6 @@ Phaser.Loader.prototype = { this.game.cache.addSpriteSheet(file.key, file.url, file.data, file.frameWidth, file.frameHeight, file.frameMax, file.margin, file.spacing); break; - case 'tileset': - - this.game.cache.addTileset(file.key, file.url, file.data, file.tileWidth, file.tileHeight, file.tileMargin, file.tileSpacing, file.rows, file.columns, file.total); - break; - case 'textureatlas': if (file.atlasURL == null) diff --git a/src/system/Device.js b/src/system/Device.js index f733b543..1e40f7e2 100644 --- a/src/system/Device.js +++ b/src/system/Device.js @@ -40,6 +40,12 @@ Phaser.Device = function () { */ this.cocoonJS = false; + /** + * @property {boolean} ejecta - Is the game running under Ejecta? + * @default + */ + this.ejecta = false; + /** * @property {boolean} android - Is running on android? * @default @@ -478,6 +484,11 @@ Phaser.Device.prototype = { this.cocoonJS = true; } + if (typeof window.ejecta !== "undefined") + { + this.ejecta = true; + } + }, /**