Can't get overlap event to work on Arcade Physics

Phaser 3
1

Hi, I’m having difficulty getting the overlap function to work properly. According to the docs, the event emits when at least one of the two has onOverlap set to true. I’ve messed around with a Phaser example to see if I could get it running on there, but it doesn’t seem to be working. Am I doing something wrong?

You can basically paste this:
    var config = {
    type: Phaser.AUTO,
    antialias: false,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    physics: {
        default: 'arcade',
        arcade: {debug: true}
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var sprite;
var group;

new Phaser.Game(config);

function preload ()
{
    this.load.image('mushroom', 'assets/sprites/mushroom2.png');
    this.load.image('ball', 'assets/sprites/shinyball.png');
}

function create ()
{
    sprite = this.physics.add.image(400, 300, 'mushroom')
        .setVelocity(100, 200)
        .setBounce(1, 1)
        .setCollideWorldBounds(true)
        .setGravityY(200);

    group = this.physics.add.staticGroup({
        key: 'ball',
        frameQuantity: 30
    });

    sprite.body.onOverlap = true;

    Phaser.Actions.PlaceOnRectangle(group.getChildren(), new Phaser.Geom.Rectangle(84, 84, 616, 416));

    group.refresh();

    this.physics.world.on('overlap', function() {alert('hi')}, this);

    //this.physics.add.overlap(sprite, group);
}

function update ()
{
    //sprite.body.debugBodyColor = sprite.body.touching.none ? 0x0099ff : 0xff9900;
}

unto this example, http://labs.phaser.io/edit.html?src=src/physics/arcade/overlap%20collider.js&v=3.19.0

What’s wrong with the code? Why won’t it alert??

2

Hey, thanks for providing an example with an easy copy&paste! I am way more apt to help out if there is an easy way to test the issue.

I checked out your example and it seems to work perfectly if you uncomment this.physics.add.overlap(sprite, group);

Here is the code with the alert changed to a console log (so the page doesn’t get stuck) and with the above uncommented:

 var config = {
    width: 800, height: 600,
    physics: {
        default: 'arcade',
        arcade: {debug: true}
    },
    scene: {
        preload: preload,
        create: create,
    }
};

var sprite, group;

new Phaser.Game(config);

function preload ()
{
    this.load.image('mushroom', 'assets/sprites/mushroom2.png').image('ball', 'assets/sprites/shinyball.png');;
}

function create ()
{
    sprite = this.physics.add.image(400, 300, 'mushroom')
        .setVelocity(100, 200)
        .setBounce(1, 1)
        .setCollideWorldBounds(true)
        .setGravityY(200);

    group = this.physics.add.staticGroup({
        key: 'ball',
        frameQuantity: 30
    });

    sprite.body.onOverlap = true;

    Phaser.Actions.PlaceOnRectangle(group.getChildren(), new Phaser.Geom.Rectangle(84, 84, 616, 416));
    group.refresh();

    this.physics.world.on('overlap', function() {console.log("Hi")}, this);
    this.physics.add.overlap(sprite, group);
}
3

Thanks! I’m not sure why that was not specified in the docs, I thought only enabling onOverlap would do the trick :smile: