Scale recommendations

Phaser 3
1

Working on a mobile game in portrait mode using capacitor. I’m struggling to understand the config sizing and scale. Examples seem to include device pixel ratio in the scale, but that makes my actual scene and canvases larger/smaller. I’m hoping I can use game world dimensions that match 390 wide with 3 pixel ratio (1170px) and then let something inside phaser scale that down for older phones with lower pixel ratios. For my purposes, width is what really matters. I can leave some space at the bottom for taller screens. I’m targeting a 9:16 aspect ratio. Any pointers is much appreciated.

2

Screenshot
Screenshot468×840 136 KB

/**
 * Plugin for game resize in Phaser 3.80.x
 * Version: 0.0.1
 * Author: Qugurun
 * License: MIT
 */

export class GameResizePlugin extends Phaser.Plugins.BasePlugin {
    constructor(pluginManager) {
        super(pluginManager);
        this.resize = this.resize.bind(this);
    }

    init() {
        window.addEventListener('resize', () => this.resize());
        this.game.resize = this.resize;
        this.game.config.projectWidth = this.game.config.width;
    }

    resize(){
        let config = this.game.config;

        let bw = window.innerWidth;
        let bh = window.innerHeight;
    
        const room_width = config.projectWidth;

        let new_width, new_height;
    
        new_width = room_width;
        new_height = room_width * bh / bw;
    
        this.game.config.width = new_width;
        this.game.config.height = new_height;
    
        this.game.scale.setZoom(bh/this.game.config.height);
    
        this.game.scale.resize(this.game.config.width, this.game.config.height);
        this.game.scale.refresh();

        console.log(this.game.config.width.toString(), ":", this.game.config.height.toString());
    }
}

plugins: {
    global: [
        { key: "GameResizePlugin", plugin: GameResizePlugin, start: true }
    ]
 }

Look at my solution, this is a simplified code of my plugin that meets your requirements, internal calculations will always have a width of 390px, and the height will be floating and the actual dimensions are always available from each scene through this.game.config.width and this.game.config.height

resize_app_ template.zip (1.2 MB)

3

GIF 11.06.2024 20-46-14

You can make a behavior that is usually called “letterbox”, the green area is 390*1170. It is always centered and fits into the browser window, while additional space is available for displaying assets. And there will be no black or inaccessible areas to draw.

4

Since v3.16 Phaser doesn’t have resolution control so you’ve probably seen, e.g.,

new Phaser.Game({
  width: 1000px * (window.devicePixelRatio || 1),
  height: 1000px * (window.devicePixelRatio || 1),
  scaleMode: Phaser.ScaleModes.FIT
});

which does introduce the problem of different world sizes/distances.