I am creating a 2D game using OpenGL. For sprites, I use textured quads (actually two triangles). The texures contain transparent pixels, since objects are not always perfectly rectangular.

How do I do collision detection on the objects, not the quads? I was thinking to first check the quads for collision and if they match, check the textures.

But how can I check if two non-transparent pixels are on top of each other (or next to each other) for the two objects?

Or is there a completely different way of how this is done best?

  • 2
    \$\begingroup\$ What you are looking for is called Pixel-Perfect Collision. \$\endgroup\$ – Alexandre Desbiens Jul 1 '15 at 18:42
  • \$\begingroup\$ Thanks. So the bitmap is loaded and checked for collision outside of OpenGL (on the CPU)? \$\endgroup\$ – schemar Jul 1 '15 at 18:49
  • \$\begingroup\$ I do not know the details about this technique (mainly because I've never had to use it), so that's why I've only made a comment and not an answer. But yes, the collision calculation would be made on the CPU, using the image's data. Since you made a mention to bitmaps, could you edit your question so that we know which image formats you are using? \$\endgroup\$ – Alexandre Desbiens Jul 1 '15 at 18:51
  • 1
    \$\begingroup\$ possible duplicate of How do I find the point of impact with 2D per-pixel collision detection? \$\endgroup\$ – Seth Battin Jul 2 '15 at 15:51
  • 1
    \$\begingroup\$ @apheleia. Yes if you want to do pixel perfect collision, you will need to do it on the CPU. In most cases though, pixel-perfect is not needed and it's much more efficient to use a collision mesh that is the shape you want. Generally our sprite is going to be a fairly basic shape or combination of a few basic shapes. Eg, if your sprite is a character you might have some rectangles for arms, legs, body and a circle for the head. Then you can use the physics engine and offload the collision detection to the GPU. \$\endgroup\$ – Fuzzy Logic Jul 6 '15 at 0:16

I'm lazy, so here is the way I'd tackle this issue: it would be by coupling the graphics with a collision/physics engine. You could try and find a basic collision engine for your language and implement something like this for your collisions and graphics:


The image is composed with square sprites images; here is the colour coding (note that the first row, and the arrows, are just to illustrate what the original sprites look like):

  • Yellow: the edge of the sprite (square quad)
  • Red: collision box or collision circle
  • Blue: mix of Yellow and Red -> the sprite and the object collision rectangle match

So for each sprite, you also need to create a set of collision circles and collision boxes that are moved (transformed) around the same way your sprites are.

The rest depends on your implementation and the implementation of the collision engine you'll use. This will not give you pixel perfect collision, but it's a basis for more complex physics simulation.

All tiles except "Xerathul's Revenge" tiles have been drawn by David E. Gervais, and are published under the Creative Commons licence. You are free to to copy, distribute and transmit those tiles as long as you credit David Gervais as their creator. (Original site).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.