How to get a pixel-perfect events (clicks, mouseover, etc.) for a sprite?

[zgniatacz_galaktyk]

Hi,

 

I am new to Pixi and have some questions about events.

 

I have a bunch of sprites that are hexagonal tiles (not squares). I want to be able to handle mousover, mouse out and click events over these hexes. But the events are emited for the sprite rectangular areas, not the actual hexagonal shape.

 

This question can be generalized: how to get all sorts of events (mousemove, mouse click etc.) only when a non-transparent pixel is clicked or hovered over. I thought I maybe could examine a texture pixel where the mouse currently is and check if the underlaying pixel is transparent but I don't know how to do this.  Any ideas?

 

Another question I have is about mosemove event. Suppose I have this code:

mySprite.mousemove(mouseData){  // do something...}

What happens is mousemove event is fired off even if the mouse moves outside of the sprite. It seems like this event is "global", so what's the point of handling this event for mySprite?

 

I also noticed the documentation seems outdated. For example mouseData parameter description in the example above is incorrect (it doesn't have getLocalPosition function, instead there's data object that has more stuff). Other example is that sprite events are not in the official documentation at all

[ivan.popelyshev]

Yes, interaction manager is a pain, and docs are outdated. You need to add hitArea to your objects, make one PIXI.Polygon and specify mySprite.hitArea = myPolygon whenever you create a tile.

 

P.S. we even have a bounty on that thing: https://www.bountysource.com/issues/26281649-rewrite-interaction-manager

[fire7side]

Why isn't there a hitArea property in the sprite class?  Does this still work?  How is it positioned?

[fire7side]

OK, I think I get it.  I use the Polygon.contains() method to check for the mouse position added to the sprite.  I'll try that, anyway.

[Hachi]

Just to mention on this subject. I am not all that knowledgeable on the inner workings of PIXI yet, but I have made my own workaround by using the InteractionManager, so I am willing to help and see the issue you have, if you need. I do event handling manually with eventlisteners on the canvas, but otherwise use the InteractionManager and hitArea to make the precise hit detection, you can find the codes around here: https://github.com/Hachitus/warmapengine/blob/master/src/components/map/core/ObjectManager.js and here: https://github.com/Hachitus/warmapengine/tree/master/src/components/map/extensions/hexagons . Though they might not be that clear as the project is quite modularized and fragmented.

[fire7side]

I think I posted some on another thread, but Sprite has an undocumented member called hitArea which is a polygon graphic object.  I just assigned a polygon that represented the area I wanted, and it worked perfectly.  Everything outside the polygon is ignored by the interactive functions.

[ivan.popelyshev]

Why cant you use v3? What exactly is there in v2 that you cant port it?