Jump to content

Fixed size game area - scale to fit device


reilly
 Share

Recommended Posts

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});

....

 

Link to comment
Share on other sites

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 comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...