# Two Arcade bodies overlap in v 3.80.1

**URL:** <https://phaser.discourse.group/t/two-arcade-bodies-overlap-in-v-3-80-1/14252>\
**Category:** Phaser 3\
**Created:** [April 23, 2024, 9:38am UTC](https://phaser.discourse.group/t/two-arcade-bodies-overlap-in-v-3-80-1/14252 "2024-04-23T09:38:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![QuantumTopology](https://avatars.discourse-cdn.com/v4/letter/q/94ad74/32.png) [@QuantumTopology](https://phaser.discourse.group/u/QuantumTopology)\
**Post date:** [April 23, 2024, 9:38am UTC](https://phaser.discourse.group/t/two-arcade-bodies-overlap-in-v-3-80-1/14252/1 "2024-04-23T09:38:34Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/ae7763aa98c6ebcb1a61d202010fc29a6f1ab623.png)  
Here are my codes:

```javascript
//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);

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 23, 2024, 2:27pm UTC](https://phaser.discourse.group/t/two-arcade-bodies-overlap-in-v-3-80-1/14252/2 "2024-04-23T14:27:17Z")

</div>

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:

```js
const rects = [this.rect1, this.rect2, this.rect3]

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

```

---

<div class="post-metadata">

**Author:** ![QuantumTopology](https://avatars.discourse-cdn.com/v4/letter/q/94ad74/32.png) [@QuantumTopology](https://phaser.discourse.group/u/QuantumTopology)\
**Post date:** [April 23, 2024, 11:53pm UTC](https://phaser.discourse.group/t/two-arcade-bodies-overlap-in-v-3-80-1/14252/3 "2024-04-23T23:53:32Z")

</div>

Thanks, I will try them.