[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);

[greptile-apps]

For internal use only

To resolve the issue with Arcade.Body size when using ScaleModes.FIT, modify the create method in your scene to call body.setSize after adding the DOM element to the physics system. This ensures the body size is correctly set. Here is the updated code:

create () {
    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);
    this.element.body.setSize(this.element.width, this.element.height); // Add this line

    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);
}

This ensures the body size is correctly set when using ScaleModes.FIT.

References

/plugins/impact/components/BodyScale.js
/src/scale
/plugins/impact/components/SetGameObject.js
/changelog/3.1/CHANGELOG-v3.1.md
/changelog/3.15/CHANGELOG-v3.15.md
/changelog/3.80/CHANGELOG-v3.80.md
/changelog/3.60/ScaleManager.md
/types/phaser.d.ts
/changelog/3.70/CHANGELOG-v3.70.md
/changelog/3.4/CHANGELOG-v3.4.md
/changelog/3.2/CHANGELOG-v3.2.md
/changelog/3.9/CHANGELOG-v3.9.md
/changelog/3.17/CHANGELOG-v3.17.md
/changelog/3.1.1/CHANGELOG-v3.1.1.md
/changelog/3.1
/src/scale/const/CENTER_CONST.js
/src/core/typedefs/ScaleConfig.js
/changelog/3.23
/src/scale/events/RESIZE_EVENT.js
/src/physics
/changelog/3.60/ArcadePhysics.md
/src/scale/const/SCALE_MODE_CONST.js
/src/scale/events
/src/physics/index.js
/plugins/impact/components/BodyType.js

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings