How to do Pixel-Perfect Collision between two Sprites?

[Skelptr]

Hello!

Allow me to get straight to the point: I'm looking to create pixel-perfect collision between two PIXI.Sprites. In other words, if two Sprites have overlapping pixels AND the overlapping pixels of both Sprites are not transparent in at least one coordinate, then a collision should be detected.

I've been able to easily achieve this through the Textures of the Sprites, since I can simply use the "getImageData" function of the context to determine whether each pixel is transparent or not. The problem is, Sprites have more to them than that. They can be scaled and rotated. I'm looking for someway to check the collision of two sprites, even if they have been scaled, rotated, or had any other transformation preformed on them.

In order to achieve this goal, I've thought of two things. Number 1 would be to somehow place the Sprite onto some canvas/context and then check that. Number 2 would be to somehow transform the coordinates of the pixel that's being checked to match the transformations of the Sprite itself. If anyone knows how I could do either, that would be wonderful.

Of course, if there was just simply someway to "check" the transparency of the sprite relative to the screen somehow, that would be wonderful.

Anyway, that's about it. Sorry if I'm being too... unspecific about things. I look forward to any answer someone could give me! ^^

[ivan.popelyshev]

That's not part of the renderer, take box2d or something

If you are asking that question, then, in most cases, you are doing something wrong. Find a workaround.

[xerver]

You could render to a "collision framebuffer" and check for collision of pixels there by reading it back out onto the CPU and then iterating all the pixels of the buffer. However, as I'm sure you can imagine, this would be extremely expensive.

Ideally you create shapes to represent your objects and simulate physics between those shapes, syncing the results back down into your visual (sprite) layer. Those shapes don't have to be rectangles, they can be polygons drawn to exactly match your sprite giving you what feels like pixel-perfect collisions without actually having to be.

I'd look into p2.js, box2d, and tools like PhysicsEditor. Good luck!