Jump to content

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


Recommended Posts



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 :(

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 months later...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...