ignore transparent areas of sprite for overlap

[lgrog]

Hi,

I have a game where I kill the player if he jumps on one of the enemies using overlap.

The problem is that the sprite is square with transparent corners. this causes the player to die when he touches those corners (even though he didn't actually touch the image of the enemy)

Has anyone else had this problem?

any ideas how to solve it?

thanks.

[Gio]

I think the best way would be to implement a proper collision detection algorithm, where you can define your own collision shapes that approximate the actual shapes of your sprites... then check if the collision shapes intersect. It is a bit complicated, but you can use pretty much any physics engine to do that.

 

Another way (which is simpler but much, much slower and potentially too slow on some devices and browsers) is to draw your sprites on small canvas objects, then get the image data out of the canvas objects (with context.getImageData()) and then for each pixel in the overlap area, check to see if both sprites have a non-transparent value.

[spacejack]

Checking overlap using circles rather than rectangles might look better and it's even easier/faster...

 

var dx = x2 - x1; // center coordinates of the 2 objects

var dy = y2 - y1;

var distance = Math.sqrt(dx * dx + dy * dy); // distance between the two

if( distance < collisionDistance ) {

  // hit!

}

 

Pixel-perfect collision tests will be much more CPU intensive. You're usually better off doing simplified shape hit tests. Alternately you could do a simplified hit test first, then do a more detailed hit test only if the simple hit test was true.

[lgrog]

thanks. great solutions.

I am going to try the circle method.

What sprites am I getting back in the overlap function? I couldn't find the documentation (I need the coordinates of the sprites that overlapped)