Android scaling and orientation

Phaser 3
8

If you only use the game on a mobile device (where you do not have to resize the game during game play), the strategy below would be the simplest. It will scale the game in width based on the display ratio.

window.addEventListener('load', () => {
  // setTimeout to 1 second will prevent a bug if you using a splash screen
  window.setTimeout(() => {
    // fix the height to 720
    const DEFAULT_HEIGHT = 720
    // adjust the width dynamically based on the device screen ratio
    const DEFAULT_WIDTH = (window.innerWidth / window.innerHeight) * DEFAULT_HEIGHT

    const config = {
      //...
      scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: DEFAULT_WIDTH,
        height: DEFAULT_HEIGHT
      },
      //...
    }
    new Phaser.Game(config)
  }, 1000)
})
2 Likes