# Mouse area off in Sprites
**URL:** https://phaser.discourse.group/t/mouse-area-off-in-sprites/9482
**Category:** Phaser 3
**Created:** [May 4, 2021, 9:11pm UTC](https://phaser.discourse.group/t/mouse-area-off-in-sprites/9482 "2021-05-04T21:11:37Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@YanKleber](https://phaser.discourse.group/u/YanKleber)
#### Post date: [May 4, 2021, 9:11pm UTC](https://phaser.discourse.group/t/mouse-area-off-in-sprites/9482/1 "2021-05-04T21:11:37Z")
Hi!
I have played with [Phaser.io](http://Phaser.io) in a small project a lot of time ago and then nothing else. Now I am starting a new big project and it’s like if I was starting from scratch. Anyway I am starting fresh with a few quick tests and am doing well but I just realized a small issue with the mouse area of a PNG sprite.
The problem is that the mouse area is off of the actual image. Also it behaves different in animated and in static sprite, but in both cases it’s off. It has some transparent areas. I would put a complete sample online but I don’t know of no one fiddle space where I could put JS and images.
Anyway the code is fairy simple and I am sure that the problem is not in it:
```
const spCreep = this.add.sprite(200, 200,'Creep').setInteractive();
spCreep.on('pointerover', function (pointer) {
this.setTint(0xff0000);
});
spCreep.on('pointerout', function (pointer) {
this.clearTint();
});
```
Any idea?
---
### Author:  [@Milton](https://phaser.discourse.group/u/Milton)
#### Post date: [May 5, 2021, 4:21am UTC](https://phaser.discourse.group/t/mouse-area-off-in-sprites/9482/2 "2021-05-05T04:21:14Z")
See [here](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/touchevents/#register-interactive) and [here](https://labs.phaser.io/edit.html?src=src/input/game%20object/debug%20hitarea.js&v=3.54.0).
Maybe it seems off because it is using a rectangle instead of the shape you expect?
- Set hit area from width & height (rectangle) of the texture
```javascript
gameObject.setInteractive();
```
- Set hit area from game object
```javascript
gameObject.setInteractive(shape, callback);
```
---
### Author:  [@samme](https://phaser.discourse.group/u/samme)
#### Post date: [May 5, 2021, 3:28pm UTC](https://phaser.discourse.group/t/mouse-area-off-in-sprites/9482/3 "2021-05-05T15:28:17Z")
Do
```javascript
this.input.enableDebug(spCreep);
```
That will show the hit area.
---
### Author:  [@YanKleber](https://phaser.discourse.group/u/YanKleber)
#### Post date: [May 7, 2021, 10:57pm UTC](https://phaser.discourse.group/t/mouse-area-off-in-sprites/9482/4 "2021-05-07T22:57:04Z")
Thanks for this hint, **Samme**!
Now using enableDebug it showed me that the hit area is smaller than my sprite. Any idea why this?
PS: I used TexturePacker to make it.
Following the links provided by **Milton** I changed my code to:
`const spCreepCircleNext = this.add.sprite(100, 100).setInteractive(new Phaser.Geom.Rectangle(0, 0, 57, 48), Phaser.Geom.Rectangle.Contains);`
Although it seems to have fixed the issue I imagined that the setInteractive without any polygon parameter would find the bounds of the sprite automatically. It really puzzled me!