[dom] error Arcade.Body size when Scale use ScaleModes.FIT

[zbrongyaozb]

Version

• Phaser Version: 3.80.1

• Operating system: Windows 10

• Browser: Edge , Chrome

Description

when use dom with physics, and Scale mode is Phaser.Scale.ScaleModes.FIT. the body size is not correct.
The problem can be solved by manually calling body.setSize.

Example Test Code

sandbox

class Example extends Phaser.Scene
{
    element;
    player;
    cursors;

    preload ()
    {
        this.load.image('block', 'https://labs.phaser.io/assets/sprites/block.png');
    }

    create ()
    {
        // error size
        this.cursors = this.input.keyboard.createCursorKeys();
        this.element = this.add.dom(300, 200, 'div', 'font-size: 96px', '💩').setOrigin(0);

        this.physics.add.existing(this.element, false);

        this.element.body.setCollideWorldBounds(true);

        // Calling setSize will provide the accurate size.
        const element = this.add.dom(100, 100, 'div', 'font-size: 96px', '💩').setOrigin(0);
        this.physics.add.existing(element, false);
        element.body.setCollideWorldBounds(true).setSize(element.width, element.height);
    }

    update ()
    {
        this.element.body.setVelocity(0);

        if (this.cursors.left.isDown)
        {
            this.element.body.setVelocityX(-300);
        }
        else if (this.cursors.right.isDown)
        {
            this.element.body.setVelocityX(300);
        }

        if (this.cursors.up.isDown)
        {
            this.element.body.setVelocityY(-300);
        }
        else if (this.cursors.down.isDown)
        {
            this.element.body.setVelocityY(300);
        }
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    backgroundColor: '#0072bc',
    scale: {
      mode: Phaser.Scale.ScaleModes.FIT,
      autoCenter: Phaser.Scale.CENTER_BOTH,
      width: 600,
      height: 450,
    },
    dom: {
        createContainer: true
    },
    physics: {
        default: 'arcade',
        arcade: {
            debug: true
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);