# Extended Graphics and cannot make mouse interactions work

**URL:** <https://phaser.discourse.group/t/extended-graphics-and-cannot-make-mouse-interactions-work/1205>\
**Category:** Phaser 3\
**Created:** [February 13, 2019, 6:05am UTC](https://phaser.discourse.group/t/extended-graphics-and-cannot-make-mouse-interactions-work/1205 "2019-02-13T06:05:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![t3r3th](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@t3r3th](https://phaser.discourse.group/u/t3r3th)\
**Post date:** [February 13, 2019, 6:05am UTC](https://phaser.discourse.group/t/extended-graphics-and-cannot-make-mouse-interactions-work/1205/1 "2019-02-13T06:05:11Z")

</div>

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)
```

---

<div class="post-metadata">

**Author:** ![t3r3th](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@t3r3th](https://phaser.discourse.group/u/t3r3th)\
**Post date:** [February 13, 2019, 6:24am UTC](https://phaser.discourse.group/t/extended-graphics-and-cannot-make-mouse-interactions-work/1205/2 "2019-02-13T06:24:09Z")

</div>

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!