Error: Cannot read property 'queueDepthSort' of undefined

Phaser 3
1

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 !

2

Hi,
Polygon doesn’t seems to handle setInteractive

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

3

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

Thanks samme. That is super helpful !