xetra11 xetra11 - 1 month ago 16
Javascript Question

How to avoid interactivity (click etc.) on alpha transparent zones in sprites in PIXI.js

I loaded a hexagon.png whichs unfilled area is transparent due alpha values. When a user clicks on that one I want him only be able to click the non-transparent area to avoid overlapping events on the rectangle borders when the hexagons are aligned together. Is there any function or property that is able to do this?

Answer

You can set the hitArea of a Sprite. It can be a Rectangle, Circle, or Polygon. For a 200 x 200 hexagon Sprite you could do something like this:

var points = [50,0, 150,0, 200,100, 150,200, 50,200, 0,100];
sprite.hitArea = new PIXI.Polygon(points);

**note this seems to be broken in the latest release. It was working in PIXI v3, and up until PIXI v4.0.3.