Jump to content

Overlap not working with user-defined class


Recommended Posts

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

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);
        targets: goal2,
        x: 224,
        y: 128,
        duration: 500,

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


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...