Fitting game in different screens

Phaser 3
1

Hi!

I am about to finish my first project in Phaser and now my concern is that it displays correctly in different media. Originally it is 1024 x 768 pixels and I managed to make it fit nicely either in computer screen as well in small mobile screens (I didn’t test it in a real mobile but in Chrome using the “mobile mode”) with the following code:

var config = {
  type: Phaser.AUTO,
  width: 1024,
  height: 768,
  backgroundColor: 0xff6600,
  physics: {
    default: "arcade",
      arcade: {
      gravity:{y:0},
      debug: false,
    }        
  },
  scale: {
    mode: Phaser.Scale.FIT,
  }
};

However I have two questions:

  1. When I tilt the mobile to landscape, because the aspect ratio my game won’t fill the while screen and so it gets aligned to the left with a considerably chunk of white at the right side. I would like that it shows centered in the screen.

  2. Also I’d like to know if it’s possible to limit the size of the game in 1024 x 768 for big screens (it is “growing” in order to use the maximum screen size it can).

Ideas?

Thanks!

2

Hey,

don’t know if I got it right, but for your first problem I would try the following in the game config:

scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
}

This should center the canvas horizontally and vertically :slight_smile:

Best regards
Nick

1 Like
3

Thank you very much for this, Nick. It did the trick perfectly. :slight_smile:

1 Like