Better Collision Detection

[peterje 2]

Currently, the Sprites in my game only have rectangular collision detection, but more complex shapes for their hitArea. This makes drag & drop very nice but I am wondering if the same is possible for collision detection. Somehow, Scratch has this ability. As shown here, even for shapes where a hull would not be very good, the collision detection is still perfect. Anyone have an idea if this can be done in PIXI? Or am I just limited to rectangular collision detection?

 

For example, a sample sprite I have looks like this:

 

And the hitArea I generated looks like this:

 

The hit area is represented as an array of polygons:

 

Assuming each of my sprites also has a hitArea of N polygons, is there a library I can use to detect collision between the two?  I looked at the Separate Axis Theorem, but that seems to only work when each sprite can be represented as a single polygon. However, mine are represented as many polygons together.

 

Any suggestions? 

[ivan.popelyshev 1082]

PixiJS does not have physics. At all. the only physics it does have is contains() for different shapes.

Take p2 https://github.com/schteppe/p2.js , build from source (not from npm!!!!, just use "grunt" to do that), make pixi stage and physics world separated, store pixi/p2 components in your own entity class. The usual ECS-y architecture.

Here is how its done: https://codesandbox.io/s/smoosh-river-fie1l

Edited January 2 by ivan.popelyshev

[peterje 2]

Thanks for answering all my noob questions Ivan. Why won't npm work?