javascript - Phaser.js with autoCenter will offset canvas bounding rectangle

Question

Am trying figure Phasers scale-manager to get it to be more responsive like in felgo's article create mobile games for different screen sizes .If anyone knows how to do this in Phaser please do share

When I set game config to autoCenter: Phaser.Scale.CENTER_BOTH then in the scene i test the bounds I find them to have offset in both direction width and height how to center it back.

Here is the Game code am resting

const config: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    backgroundColor: '#a39b9b',
    scale: {
        parent: 'game',
        expandParent: true,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: screenDims.gameWidth,
        height: screenDims.gameHeight,
        mode: Phaser.Scale.FIT    
    },
    scene: [PreloadScene, MainScene],
    physics: {
        default: 'arcade',
        arcade: {
            debug: false,
            gravity: {y: 400}
        }
    }
}

window.addEventListener('load', () => {
    new Phaser.Game(config);
})

and code for the scene

export default class MainScene extends Phaser.Scene {
    update() {
        this.graphics.clear();
     
        const rec = this.scale.canvasBounds;
        this.graphics.lineStyle(3, 0xffff00);
        this.graphics.strokeRectShape( rec);
    }
}

question from:https://stackoverflow.com/questions/65895579/phaser-js-with-autocenter-will-offset-canvas-bounding-rectangle

Answer 1

Waitting for answers