Overlap not working with user-defined class

[Kizerian]

I'm a newcomer to Phaser 3 and I'm having difficulty getting my user-defined classes to work with physics.add.overlap.

I've defined a class Goal that extends Phaser.Physics.Arcade.Image. I've created two instances of this class and they appear in the game window as expected. They also respond to Tweening correctly. However, I haven't yet been able to detect an overlap between the two images with the physics engine.

I've been trawling the Phaser 3 docs for hours, but I haven't had much luck. The only solution I've found is creating the goals with the physics.add.image method, but the entire point of this exercise for me was to utilize OOP.

Any suggestions?

const gameConfig = {
    parent: 'phaser-app',
    type: Phaser.CANVAS,
    width: 320,
    height: 320,
    physics: {
        default: 'arcade'
    },
    scene: {
        preload: preload,
        create: create
    }
}

var game = new Phaser.Game(gameConfig);

class Goal extends Phaser.Physics.Arcade.Image {
    constructor(scene, position) {
        super(scene, position.x, position.y, 'goal');
        scene.children.add(this);
    }
}

function preload() {
    this.load.image('goal', 'assets/goal.png');
}

function create() {
    var goal1 = new Goal(this, new Phaser.Geom.Point(160, 128));
    var goal2 = new Goal(this, new Phaser.Geom.Point(32, 128));
    this.physics.add.overlap(goal1, goal2, test);
    this.tweens.add({
        targets: goal2,
        x: 224,
        y: 128,
        duration: 500,
    });

    function test(goal1, goal2) {
        console.log('This works!');
    }
}

 

[samme]

// scene.children.add(this); // Remove
scene.physics.add.existing(this);

https://github.com/samme/phaser3-faq/wiki#how-do-i-extend-a-game-object

[Kizerian]

Thanks! That line causes the overlap to work. I still need scene.children.add(this) though, otherwise the images are invisible.