Settings rectangle interactive, error: hitAreaCallback is not a function

Phaser 3
1

I’m trying to create a clickable rectangle in my game but can’t figure it out. There are some examples, but none for rectangles. The problem is that when I use setInteractive() it gives this error when moving the mouse cursor in the Phaser game area.

Uncaught TypeError: n.hitAreaCallback is not a function

Here is my code (also see Phaser 3 Extended update sprite bug - JSFiddle - Code Playground) and the rectangle should become darker when you move the mouse over it, and then normal again when you move the mouse out of it.

function create ()
{
    // rectangle variable
    var r1 = this.add.graphics();

    // draw rectangle
    r1.fillStyle(0xffb000, 1);
    r1.fillRect(450, 200, 200, 200);

    // this line seem to cause the problem somehow
    r1.setInteractive(new Phaser.Geom.Rectangle(450, 200, 200, 200));

    // pointer on rectangle
    r1.on('pointerover', function () {r1.alpha = 0.5;});
    r1.on('pointerout', function () {r1.alpha = 1.0;});
}
2

change above to: r1.setInteractive(new Phaser.Geom.Rectangle(450, 200, 200, 200), Phaser.Geom.Rectangle.Contains);

1 Like