Jump to content

How to do Pixel-Perfect Collision between two Sprites?


Recommended Posts


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! ^^

Link to comment
Share on other sites

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!

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...