ScaleManager has a new scaleMode called RESIZE which will tell Phaser to track the size of the parent container (either a dom element or the browser window if none given) and set the canvas size to match it. If the parent changes size the canvas will resize as well, keeping a 1:1 pixel ratio. There is also a new ScaleManager.setResizeCallback method which will let you define your own function to handle resize events from the game, such as re-positioning sprites for a fluid responsive layout (#642)

The width and height given to the Phaser.Game constructor can now be numbers or strings in which case the value is treated as a percentage. For example a value of "100%" for the width and height will tell Phaser to size the game to match the parent container dimensions exactly (or the browser window if no parent is given). Equally a size of "50%" would tell it to be half the size of the parent. The values are retained even through resize events, allowing it to maintain a percentage size based on the parent even as it updates.
This commit is contained in:
photonstorm 2014-09-01 01:52:04 +01:00
parent 5fb8c7eb85
commit 97d771c4e8
3 changed files with 4 additions and 15 deletions

View file

@ -71,6 +71,8 @@ Version 2.1.0 - "Cairhien" - -in development-
* Updated to [p2.js 0.6.0](https://github.com/schteppe/p2.js/commit/d1c7a340c42e4d5d1d939fba5fd13c5e49d6abd2) - this was an API breaking change, so please see the p2.js section of this change log specifically if you're using p2 in your game.
* Ninja Physics is no longer included in the build files by default. Not enough people were using it, and not enough contributions were coming in to help polish it up, so we've saved the space and removed it. It's still available in the grunt build files if you require it, but we're deprecating it from the core library at this time. It will make a return in Phaser3 when we move to a modular class system.
* ScaleManager has a new scaleMode called `RESIZE` which will tell Phaser to track the size of the parent container (either a dom element or the browser window if none given) and set the canvas size to match it. If the parent changes size the canvas will resize as well, keeping a 1:1 pixel ratio. There is also a new ScaleManager.setResizeCallback method which will let you define your own function to handle resize events from the game, such as re-positioning sprites for a fluid responsive layout (#642)
* The width and height given to the Phaser.Game constructor can now be numbers or strings in which case the value is treated as a percentage. For example a value of "100%" for the width and height will tell Phaser to size the game to match the parent container dimensions exactly (or the browser window if no parent is given). Equally a size of "50%" would tell it to be half the size of the parent. The values are retained even through resize events, allowing it to maintain a percentage size based on the parent even as it updates.
* Device will now detect for Kindle and PS Vita (thanks @lucbloom)
* Device will now detect for Cordova (thanks @videlais #1102)
* Arcade Physics Body.skipQuadTree is a new boolean that if set to `true` when you collide the Sprite against a Group it will tell Phaser to skip using a QuadTree for that collision. This is handy if this Body is especially large.

View file

@ -660,7 +660,7 @@ Phaser.Game.prototype = {
if (this.config['enableDebug'])
{
// this.debug.preUpdate();
this.debug.preUpdate();
}
this.physics.preUpdate();
@ -686,7 +686,7 @@ Phaser.Game.prototype = {
if (this.config['enableDebug'])
{
// this.debug.preUpdate();
this.debug.preUpdate();
}
}

View file

@ -372,9 +372,6 @@ Phaser.ScaleManager.prototype = {
*/
boot: function (width, height) {
console.log('ScaleManager boot');
console.log('parent', this.game.parent);
var target;
var rect = new Phaser.Rectangle();
@ -383,13 +380,11 @@ Phaser.ScaleManager.prototype = {
if (typeof this.game.parent === 'string')
{
// hopefully an element ID
console.log('parent element ID');
target = document.getElementById(this.game.parent);
}
else if (typeof this.game.parent === 'object' && this.game.parent.nodeType === 1)
{
// quick test for a HTMLelement
console.log('parent html element');
target = this.game.parent;
}
}
@ -398,8 +393,6 @@ Phaser.ScaleManager.prototype = {
if (!target)
{
// Use the full window
console.log('target failed, using window');
this.parentNode = null;
this.parentIsWindow = true;
@ -408,9 +401,6 @@ Phaser.ScaleManager.prototype = {
}
else
{
console.log('target found, getting rect');
console.log(target.getBoundingClientRect());
this.parentNode = target;
this.parentIsWindow = false;
@ -443,9 +433,6 @@ Phaser.ScaleManager.prototype = {
newHeight = rect.height * this.parentScaleFactor.y;
}
console.log(rect);
console.log('source', width, height);
this.updateDimensions(newWidth, newHeight, false);
},