Android scaling and orientation

Phaser 3
1

Greetings!
I am new to phaser, I am trying to make game look decent on Android.
What is the best way to scale game and make it landscape only?
I have this config right now

var config = {
    type: Phaser.AUTO,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { 
                y: gravityY,
                x: gravityX 
            },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    scale: {
        mode: Phaser.DOM.FIT,
        orientation: Phaser.Scale.Orientation.PORTRAIT,
        width: 800,
        height: 600
    }
};
2

Are you building a Native App, PWA or do you just serve your Phaser game over http/https?

Maybe you want to try out the scale strategy provided in post #1555

1 Like
3

Thank you for the answer.
I am building tutorial from getting started using cordova.
I want to make game with 800x600 resolution (like in example) scaled to phone resolution and make screen landscape only.

4

Try these scale properties:

scale: {
  mode: Phaser.Scale.FIT,
  autoCenter: Phaser.Scale.CENTER_BOTH,
  width: 800,
  height: 600
},

And to lock the screen orientation try to add <preference name="Orientation" value="landscape" /> to your config.xml.

1 Like
5

These properties leave white lines on the sides, it is not exactly what I am looking for.

6

I guess these white lines are the html. Your canvas will always be in the display ratio 1.33 (800/600). But phones have higher ratios (most have 1.77 or above).

If you do not want to use a complex resizing/scaling strategy, I suggest, you to choose one of the resolutions in this list and set the background of the html and body tag to black.

1 Like
7

I moved project to hd resolution, it looks well on 16:9. I have honor 10 with 21:9, so still black lines on sides.
Could you provide me advanced scaling strategy? I want to support both display ratios.

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