1

I am making a game in HTML5, Canvas.

Well, I use 16x16 sprites and I use circle shapes between the sprite objects to define the collisions

And they may also be rotated inside the game..

Now I wonder, is there any way to detect/calculate Pixel-Perfect Collision repulsion/response, so that when two sprites collide, they (align perfectly to)/(actually collides with) each other?

Thanks.

Please leave comments if you don't understand.

  • Once the *broad phase* collision detection occurs (i.e. with grid/circles), switch to *narrow phase*. If you can access the individual pixel values then you can trivially use a "pixel mask" - move the entities along the movement vector until there is a mask-based collision (i.e. any pixels from the different entities occupy the same space), then back it off. – user2864740 Mar 01 '14 at 20:33
  • Sorry, I think I don't really understand.. –  Mar 01 '14 at 20:34
  • are you asking for just rectangle collision or circle-rectangle collision? – JqueryToAddNumbers Mar 01 '14 at 20:35
  • I am asking for pixel-perfect collision –  Mar 01 '14 at 20:35
  • and the sprites don't have predefined shapes? – JqueryToAddNumbers Mar 01 '14 at 20:37
  • nope, they are just sprites, drawed in the middle of the objects coordinates –  Mar 01 '14 at 20:38

1 Answers1

1

Pixel-Perfect Collision is easily done, but is very expensive in terms of cpu power.

This is how you wold go about doing it:

Sprite pixel data

Every sprite has pixel data that can be accessed, now say the sprite above was your sprite, you'd do a for loop to list through every single pixel in the sprite that is opaque, and check against every single pixel in the other sprite, here's some pseudo-code:

for(i = 0; i < totalPixelsInSprite; i++){

if( pixelIsNotTransparent ){

 for(z = 0; z < totalPixelsInOtherSprite; z++){
    if( (pixelco_ordinate == otherSpritePixelCo_Ordinate) && (otherSpritePixelIsOpaque)){
      // add some code to handle the collision
    }
 }

}
}

detail about how you access the pixels can be found on this site: getPixel from HTML Canvas?

so the idea is pretty much to get the position of every non-transparent pixel, and then check is against every non-transparent pixel in the other sprite. the actually "checking" is just seeing if the pixel in the first sprite has the same co-ordinates as the pixel in the second sprite.

there are optimisations to be done here, it was a very crude example of pixel collision, first of all you should check if the rectangles of the sprite collide first and then do this detection if the rectangles are colliding, this will save cpu power.

Community
  • 1
  • 1
JqueryToAddNumbers
  • 1,063
  • 3
  • 14
  • 28
  • Yes, yes, yes, that is the collision, but I want both the collision and the repulsion/responce of the collision, you see, when 2 balls collide, they bounce away from eachother, that's what I wanna do the same with the sprites. They do have x and y vars for the coordinates and vx and vy vars for the movement, velocities. So I also wanna know how the vx, and vy would change if the sprites collide. –  Mar 02 '14 at 07:23
  • ahh, see that is much harder if not impossible with pixel collision, and that is why many people steer clear of pixel detection and use polygons instead that are in an approximate shape around the sprite. Polygon collision is also very difficult and requires understanding of vector mathematics, and that is why many people just stick to cleverly using rectangle collision. – JqueryToAddNumbers Mar 02 '14 at 08:40
  • 1
    Well, I'll wait and see, but I still use my circle collision - http://murplyx.net/projects/zm –  Mar 02 '14 at 09:00
  • You have rotating sprites in you game, and pixel collision doesn't work for rotating sprites, the circle collision you're using is fine, if it's that game you're talking about. Circle collision is the easiest and best for the game you have. – JqueryToAddNumbers Mar 04 '14 at 06:17
  • Are you sure it is impossible, can't you kinda count the canvas pixels after the rotation instead of counting the sprites pixels? –  Mar 04 '14 at 06:54
  • you can, but bear in mind that when you rotate a sprite, you're losing pixel data because rotating algorithms approximate the position of the pixels after rotation, so the whole goal of pixel perfect detection is undermined. What I suggest is, if you're having trouble with circles bouncing off each other when they're not actually touching on-screen, is that you make the circles smaller, so that the pixels of the sprites overlap a bit (not too much), and then stick with the circle collision, it'll still look very decent, and most importantly you'll have accurate rebounding with circle detection – JqueryToAddNumbers Mar 04 '14 at 20:25