Extended Graphics and cannot make mouse interactions work

Phaser 3
1

I’m new to phaser and I have a custom class that extends Graphics. I want to trigger a function when the object is clicked. The code shown below draws the unit but never registers any events.

If instead, I try passing “this” to setInteractive then the onClick fires any time the mouse is over any part of the canvas. Is there a way to specify a hit box for registering clicks?

Thanks!

  class Unit extends Phaser.GameObjects.Graphics {

    constructor(scene, x, y, stats){
      super(scene, x, y)
      this.stats = stats
      this.drawSelf()
      this.setInteractive()
      this.on.("pointerdown", () => {this.onClick() })
    }

    drawSelf() {
      this.lineStyle(2, 0xCC0000, 1.0);
      this.fillStyle(0x888888, 1.0);
      this.moveTo(50, 0)
      this.lineTo(100, 100)
      this.lineTo(50, 65)
      this.lineTo(0,100)
      this.closePath()
      this.stroke()
      this.fill()
      this.scaleX = 0.5
      this.scaleY = 0.5
    }

    onClick(){
      console.log("whatup")
    }
  }

My scene creates a unit like this

  this.unit = new Game.Unit(this, 400, 400, {health: 100})
  this.add.existing(this.unit)
2

I figured it out, the setInteractive call can take a polygon like so

this.hitpoly = new Phaser.Geom.Polygon(this.points)
this.setInteractive(this.hitpoly, Phaser.Geom.Polygon.Contains)

If this.points contains the points that you used to draw your shape then you will get pixel perfect click detection. Hopefully this helps others!