Fixed size game area - scale to fit device

[reilly]

Hi,

 

Pretty new to phaser - wondering if anyone might be able to help me out.

 

I've got a fixed size game area (1000px x 1000px) which i'm using to draw a bunch of rectangles on in fixed positions (a masonry style grid ie/ https://www.edufukunari.com.br/file/2014/11/masonry111.jpg)

 

(The fixed game size lets' me accurately position each rectangle for future use...)

 

Is is possible to take the entire game area and then resize it to fit the current device???

 

Here's my initial setup code:

 

---

 

var game;

var deviceWidth = document.getElementById("game").offsetWidth;
var deviceHeight = document.getElementById("game").style.height;

window.onload = function() {

gameWidth = 1000;
gameHeight = 1000;

game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, 'game', {preload:onPreload, create:onCreate, update:onUpdate});

....

 

[drhayes]

I think you want to start using the scale manager:

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

[Get_Bentley]

Hi,

 

Pretty new to phaser - wondering if anyone might be able to help me out.

 

I've got a fixed size game area (1000px x 1000px) which i'm using to draw a bunch of rectangles on in fixed positions (a masonry style grid ie/ https://www.edufukunari.com.br/file/2014/11/masonry111.jpg)

 

(The fixed game size lets' me accurately position each rectangle for future use...)

 

Is is possible to take the entire game area and then resize it to fit the current device???

 

Here's my initial setup code:

 

---

 

var game;

var deviceWidth = document.getElementById("game").offsetWidth;

var deviceHeight = document.getElementById("game").style.height;

window.onload = function() {

gameWidth = 1000;

gameHeight = 1000;

game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, 'game', {preload:onPreload, create:onCreate, update:onUpdate});

....

^drhayes is right. I have been working through a little tutorial for a sidescroller and this is how it was done and seemed to work well. Hope this helps I will post link as well.

 

//scaling options

 

    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

 

    //have the game centered horizontally

 

    this.scale.pageAlignHorizontally = true;

 

    this.scale.pageAlignVertically = true;

 

    //screen size will be set automatically

 

    this.scale.setScreenSize(true);

 

 

Link to tutorial: http://html5hub.com/how-to-make-a-sidescroller-game-with-html5/