Collision between sprites

[malakiah]

Hello,

 

I'm developing my first application with pixi.js 4 and I have a problem with collision between sprites.
In my case I use textures with irregular shapes and logically I'm able to intercept collision between rectangular sprites (using Bump library).
I need instead to check collision between irregular shapes as attached example. Is there a way to create an impostor shape attached to sprite in order to have this result?
Thanks for now and sorry for my bad english.

Vittorio

[ivan.popelyshev]

Ask creators of Bump library.

[malakiah]

Hi,

I'm not able to find an email of Bump creators. You don't know a library that could help me?
Thanks

[botmaster]

You could always create smaller sprites contained within the sprite and placed at correct position (following the shape) and check collision on them. You could also check for non transparent pixels collision. Easier might be to work with a physic engine. 

[OSUblake]

You can use polygons for your hit areas. It doesn't have to be pixel perfect.

 

Now google how to do polygon collision detection. There are a lot of resources for this. For convex polygons you can use the Separating Axis Theorem (SAT).

https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#Separating_Axis_Theorem

 

Here's an example of SAT with phaser. 

http://hexus.github.io/phaser-sat-example/

https://github.com/hexus/phaser-sat-example

[malakiah]

Hi OSUblake,

I understand the use of polygons as hit areas but I cannot find how intercept collision betweeb two polygons.
I use BUMP library. Is there a library that can help me?

Vittorio

[OSUblake]

From what I can tell Bump only works with points, circles, and rectangles. 

This looks like it will handle polygons.

https://davidfig.github.io/intersects/

https://github.com/davidfig/intersects

 

[malakiah]

Hi,
I've seen those libraries but I've a lot of problems to integrate them into my project.
I don't understand as include in the app.

 

[OSUblake]

I'll take a look at the library later, and will make a simple demo.

[malakiah]

Hi OSUblake,
my problem is include that library in a external js. Is there a way to create a Intersect class from yy-intersects?

Thanks a lot

 

[OSUblake]

You have to install it with npm, but here's a version of it. It only works with convex polygons.

https://codepen.io/osublake/pen/f0122809730d67335264dcd50f44cad7.js

 

Another way to do this is to check for edge intersections between polygons. That will work with concave polygons. 

 

Here's the compiled code for that demo.

https://codepen.io/osublake/pen/eMvZmo.js

 

[malakiah]

OSUblake thanks a lot!!
You've saved my days.