Jump to content

Does PixiJSv4 Have "Pixel Perfect Collisions"?


Recommended Posts


Took some time, but I think I have an idea for a new game...

I need pixel perfect collisions between sprites (think 2-d space shooter).
The documentation makes absolutely no sense to me so I am asking another stupid question here:
Does PixiJSv4 have built-in pixel perfect collisions system?
(need URL link to some code and a demo)



Link to comment
Share on other sites

Pixi doesn't have that built-in, you'll have to roll your own or find a library you like. You might find that you wont need pixel-perfect collision bounds thou - especially for a space shooter things might be moving fast enough that pixel perfect won't matter so much. The only collisions library I know of that's made specifically for pixi is bump (it targets v3 but I've used it for V4 too and for reference).

Link to comment
Share on other sites

PIXI doesnt have not pixel-perfect interaction, nor collision system. And you want pixel-perfect collision.

I think its time for you to look into pixi sources, just look and learn what it has, not necessary to understand it: https://github.com/pixijs/pixi.js/tree/dev/src

Its also good to look at phaser: https://github.com/photonstorm/phaser , they have built-in everything, you can copy-paster some code from them, like Arcade logic or something else.

Link to comment
Share on other sites

Pixel perfect collision systems tend to be heavier/slower - systems like Arcade and Bump are easier and faster by dealing with rectangular and circular bounds only (i.e. not pixel perfect for other shapes). Pixel perfect bounds will likely be harder to implement and slower to execute, so it might be worth exploring to see if the easier and faster way works before going down the pixel-perfect collisions road... Also fast-moving sprites can make fudging the bounds less noticeable so it's prob worth a try before worrying about the pixel perfect part, especially for a fast-paced space shooter type game...

Link to comment
Share on other sites

I guess you can get the pixel data via something like http://pixijs.download/dev/docs/PIXI.extract.WebGLExtract.html#pixels

Though once you have that, for a space shooter you're in real trouble because you really need to test against the in-between frames too

For example let's say frame 1 your scene is like this

----- BULLET ------- TARGET ------

And then in frame 2 it's like:

----- TARGET ------ BULLET -----

So we know the bullet passed _through_ the target between renders - and when you're just calculating against simple shapes like via `distance` it's no big deal to just keep the last position in memory and compare (e.g. by drawing a "line" between previous and current position and seeing if it intersects with the target)

But for comparing against the pixels in both frames you need to keep all that pixel data in memory, along with continually grabbing it. At least if you want it to truly be pixel-perfect for _both_ objects.

No doubt there are more advanced solutions to deal with this, but I don't know of any offhand...

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