# Mouse events on transparent sprite

**URL:** <https://phaser.discourse.group/t/mouse-events-on-transparent-sprite/9332>\
**Category:** Phaser 3\
**Created:** [April 18, 2021, 2:40pm UTC](https://phaser.discourse.group/t/mouse-events-on-transparent-sprite/9332 "2021-04-18T14:40:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![knighter](https://avatars.discourse-cdn.com/v4/letter/k/71e660/32.png) [@knighter](https://phaser.discourse.group/u/knighter)\
**Post date:** [April 18, 2021, 2:40pm UTC](https://phaser.discourse.group/t/mouse-events-on-transparent-sprite/9332/1 "2021-04-18T14:40:22Z")

</div>

There is a sprite on scene with alpha. All mouse events are invoked by whole sprite area, even transparent pixels. How can I to ignore transparent area?

Second way to resolve problem is an attaching shape to sprite? I have generate json for that spite by PhysicsEditor. How to attach that shape to sprite?

In Phaser 2 that problem may be solved by using that code (deprecated):

> sprite.input.pixelPerfectOver = true;

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [April 18, 2021, 4:05pm UTC](https://phaser.discourse.group/t/mouse-events-on-transparent-sprite/9332/2 "2021-04-18T16:05:46Z")

</div>

```javascript
gameObject.setInteractive({
    hitArea: shape,
    hitAreaCallback: callback,
    draggable: false,
    dropZone: false,
    useHandCursor: false,
    cursor: CSSString,
    pixelPerfect: false,
    alphaTolerance: 1
});

```

---

<div class="post-metadata">

**Author:** ![knighter](https://avatars.discourse-cdn.com/v4/letter/k/71e660/32.png) [@knighter](https://phaser.discourse.group/u/knighter)\
**Post date:** [April 19, 2021, 1:33pm UTC](https://phaser.discourse.group/t/mouse-events-on-transparent-sprite/9332/3 "2021-04-19T13:33:14Z")

</div>

Thanks! Object { pixelPerfect: true, alphaTolerance: 1 } helped to solve the problem.  
But other way with { hitArea: shape } does not work.  
Is there a working example for shapes loaded from json? May be shape is invalid.

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [April 20, 2021, 6:12am UTC](https://phaser.discourse.group/t/mouse-events-on-transparent-sprite/9332/4 "2021-04-20T06:12:16Z")

</div>

The `gameObject.setInteractive` is not meant for Matter shapes.

A shape from PhysicsEditor is meant for a Matter Sprite.  
It has its own parser (‘fromPhysicsEditor’, PhysicsEditorParser.js).

If you are using a Matter Sprite, the JSON should work.  
Otherwise you’ll have to parse the JSON yourself (or via Matter), and use the vertices like so:  
[https://labs.phaser.io/edit.html?src=src/input\mouse\shape%20hit%20tests.js](https://labs.phaser.io/edit.html?src=src/input%5Cmouse%5Cshape%20hit%20tests.js)