Error: Cannot read property 'queueDepthSort' of undefined

Hi,

I use an image with lots of books as the background for my game. I’d like each book to be clickable and leading to a different action for each book.
I thought about using polygons to define the various areas but I can’t make them interactive.

This is what my code looks like:

var background = this.add.image(512, 384).setInteractive();
var book1 = new Phaser.GameObjects.Polygon([ 19, 388, 20, 377, 79, 361, 149, 383, 150, 397, 99, 415 ]);
book1.setIneractive();

This throws the following error: phaser.js:3022 Uncaught TypeError: Cannot read property ‘queueDepthSort’ of undefined

Help would be greatly appreciated !

Hi,
Polygon doesn’t seems to handle setInteractive

What you can try is check the position of the mouse when background is clicked

The error is because the scene argument is missing in Polygon().

Nevertheless I would use a Zone with a Polygon hit area instead:

var background = this.add.image(512, 384, 'background');

var book1 = this.add.zone(0, 0, 0, 0)
  .setInteractive(new Phaser.Geom.Polygon(/* … */), Phaser.Geom.Polygon.Contains);

this.input.enableDebug(book1);

Thanks samme. That is super helpful !