View Full Version : Pixel collision detection?

Apr 6, 2011, 04:28 AM
Hi guys,

I'm working on a Space Invaders testcase.
You know those barriers right? Where you can hide behind and shoot a hole through? That's what I want to achieve.

Is it possible to do a collisiondetection pixelwise? And make a series of pixels of that sprite transparent after collision?

I'm using Cocos2d by the way.


I think I'll have to go with a custom MutableTexture2d for fast getting and setting of pixels:


My idea is:
- First do a pixel perfect collision detection using the pixelAt function
- If there's a collision do a 'sprite merge' with one sprite being an impact-radius sprite and of course the barrier sprite using setPixelAt.

Hope that's going to work out (performance).

Any other thoughts on the subject are very welcome.


Apr 6, 2011, 01:09 PM
I've never got too into Cocos2D but I can at least throw a hint your way, but hopefully someone else can come by and offer more help. There is probably a much simpler way in Cocos to do this than what I am about to say:

Ok after writing a long winded reply I found a site that does a better job at explaining it (and has pictures!). The concept is important (and useful even if Cocos does have some sort of built in method to handle it).


I would also highly suggest if you do have to do this manually, use a bounding circle (or rectangle) first to check for collisions, and if you find one, THEN do per pixel collision detection. It will help performance greatly.

Apr 6, 2011, 01:52 PM
Thanks for the heads up chrono about the collision detection, but that was not really where I was getting at.

Perhaps this image will make it clearer.


The merging part is where I'm stuck.
I want the decay of the 'barrier' realtime, not a bunch of sprites displaying a decaying barrier.
Think of Worms where you blast away a piece of ground....how do they do that.


Apr 6, 2011, 08:33 PM
Ah ok I get what you want now.

I've never implemented it so I can't say for sure but I'm pretty sure this would involve some type of bitmasking. Hopefully someone who has done this can chime in.

Or you can try the gamedev.net forums. It may be easier to get a response there.

Apr 6, 2011, 09:08 PM
Somebody out there on a game specific programming forum should be able to answer this.

Google tells me Space Invaders came out in 1978, which means there are probably many many people who have done this over the years. While off the top of my head, I can think of a handful (and probably a bit hacky) ways of doing this, I wouldn't be surprised if there was a fairly quick and simple method of accomplishing this.

As you are using Cocos2d, probably the easiest way in my brain would be to just detect where your "bullet" sprite hits your barrier sprite. Then, using the bitmasking mentioned above, you would replace the collided/destroyed piece of your barrier with the background.


Found something that outlines this:


Apr 8, 2011, 06:21 PM
Did you ever manage to get this working?

Apr 12, 2011, 02:34 AM
Hey what's up,

Sorry haven't had much time, started coding last night again.
Yes I think I have the total solution.

The first part, the masking, I've managed to recreate with a 'RenderMask' (CCRenderTexture). An example can be found here:
This works nicely. I'm keeping track of a "blastSprite" array wich I blend with the barrierSprite on the RenderLayer.

For the second part (the pixel detection -> transparent/color), I'm going to use a hack on CCTexture2d: CCTexture2dMutable. This is a extended class with a very fast 'pixelAt' function. Haven't had the time to test it, hopefully tomorrow.
Download incl. sample can be found here:

Thanks for the effort guys. I'll show you a movie if I've got it all working :)

Apr 17, 2011, 12:38 PM
As promised: