Two Arcade bodies overlap in v 3.80.1

Phaser 3
1

I don’t know if this is the correct behavior, as the figure below shows, the red and blue square sometimes overlap (the blue square can be moved by cursor keys).

image
image845×463 1.74 KB

Here are my codes:

//import Phaser from "phaser";
class GameScene extends Phaser.Scene {
    constructor ()
    {
        super('GameScene');
    }

    preload ()
    {

    }

    create ()
    {
        this.rect1 = this.add.rectangle(400, 300, 100, 100, '0x0000ff');
        this.rect2 = this.add.rectangle(500, 200, 100, 100, '0xff0000');
        this.rect3 = this.add.rectangle(300, 500, 500, 50, '0x00ffff');

        this.physics.add.existing(this.rect1, false);
        this.physics.add.existing(this.rect2, false);
        this.physics.add.existing(this.rect3, true);

        this.cursors = this.input.keyboard.createCursorKeys();

        this.rect1.body.setCollideWorldBounds(true);
        this.rect2.body.setCollideWorldBounds(true);

        this.physics.add.collider(this.rect1, this.rect2);
        this.physics.add.collider(this.rect1, this.rect3);
        this.physics.add.collider(this.rect2, this.rect3);

        console.log(this.rect1.body);
        
        this.rect1.body.setBounce(0.2);
        this.rect2.body.setBounce(0.2);

        this.v = 300;


    }

    update ()
    {
        //this.rect1.body.setVelocity(0);
        if (this.cursors.left.isDown)
        {
            this.rect1.body.setVelocityX(-this.v);
        }
        else if (this.cursors.right.isDown)
        {
            this.rect1.body.setVelocityX(this.v);
        }

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

    }

}


let container = document.getElementById("container");
var config = {
    parent: container,
    type: Phaser.AUTO,
    width: container.clientWidth,
    height: container.clientHeight,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: true
        }
    },
    scene: [GameScene]
};

var game = new Phaser.Game(config);
2

This is mostly unavoidable but you can try any of these:

  • Increase fps (from 60) in Arcade Physics config
  • Increase overlapBias (from 4) in Arcade Physics config
  • Add a duplicate collider:
    const rects = [this.rect1, this.rect2, this.rect3]

this.physics.add.collider(rects);
this.physics.add.collider(rects);
3

Thanks, I will try them.