Collision Detection and Bounce Calculation using Colour Maps (part 1)

Here is a method I developed for a game I produced last year. I had three days, and a top down ball bouncing game with multiple levels to render. Initially I thought I’d use box2D, zero out the gravity, and then build the scenes as box2D models. This looked like taking far too long to create so I needed a quick fire solution. Then it dawned on me: Colour Maps (or to you chaps over the pond Color Maps).

Now Colour Maps are nothing new, but my idea adds to the technique.

Colour Mapping means you can build a map of your game scene with various colours representing the walls and objects. To test whether you have collided with an object, instead of numerous intersect calculations you can just test the colour of the pixel(s) underneath your character.

I realised that if I added a sprite graphic for my ball to the colour map using the Blend Mode ‘add’ then I could see collision. So if I make all the static scene furniture red (0xFF0000) and the ball sprite green (0x00FF00), when they overlap the intersection area becomes yellow.

Blend Mode collision detection

Blend Mode collision detection

So how does this help? I calculated that by using getColorBounds on the intersect yellow, I can draw a line from the centre of the rectangle to the centre of the ball. This now becomes the reflection point. I can reflect the angle of bounce against this to give a very accurate result.

Calculate the angle of reflection

Calculate the angle of reflection

OK. So the method will bounce from a partial intersection – but this means that we are calculating the bounce from a ball embedded within the border/scene furniture. I have improved this by calculating the ball path using a recursive method. The function backtracks to where the edge of the ball touches the furniture and then recalculates the path for the remaining distance to be travelled on the current iteration.
The Colour Map Bounce system in action

The Colour Map Bounce system in action

Here is a link to a quick demo of the method in action. Demo

Source and example usage is to follow in part 2.


16 Responses to “Collision Detection and Bounce Calculation using Colour Maps (part 1)”

  1. 1 Drew
    April 6, 2009 at 6:31 pm

    This is a great explanation!

    I’m very eager for part two… is it possible for you to send me part of the source? I know you said you’d put it in part two, but I know how long tutorials can take to write.


  2. May 12, 2009 at 4:06 pm

    Great one – can`t wait for part 2 !!!!!!!!!!!

  3. July 22, 2009 at 12:51 pm

    Hi, great tutorial.
    there is a problem when finding the rectangle with getColorBoundsRect( 0xFFFFFFFF, 0xFFFFFF00);
    becouse drawing on a bitmap it will create yellow pixels fading to white and they are not exactly 0xFFFFFF00 so as3 doesnt see them
    how did you fix it?

    • 4 swingpants
      July 30, 2009 at 3:12 pm

      Apologies for delay in reply. Been totally rushed off my code feet for what seems like months now.

      Yes, the yellow pixels should be exactly 0xFFFFFF00. The blend modes are exact so if 0xFF0000 overlaps with 0x00FF00 the result is 0xFFFF00. Any gradiation can only be as a result of the map colours not being exact – or any anti-aliasing that may have occurred (if you are drawing your colour map in Photoshop – if this is the case output the colour map from PS as a GIF and reduce the colours to just the ones you need)

  4. August 3, 2009 at 10:45 am

    Thanks for sharing, I will try it to detect collisions against the viewer’s head (using webcam).

    • 6 swingpants
      August 3, 2009 at 1:21 pm

      I did some webcam apps a couple of years ago, and as flood fill is an efficient way of finding movement, it lends it self to colour map collision detection. I did the classic balls landing on head experiment, and rolling off when moved – worked brilliantly.

      Apologies for not getting part 2 of the colour map article up yet. I got 1/2 way through it back in May but have been up against it workwise since then. I will finish and post asap – hopefully in the next few weeks.

  5. 7 Neil
    September 24, 2009 at 1:02 pm

    Really nice, hope you do get around to part 2 one day, maybe even a few method snippets to help others achieve this would be good.

    Thanks for sharing.

  6. 8 Dave
    January 6, 2010 at 8:42 pm

    thanks great tutorial, looking forward to part2 to see how you implemented this! would this method work for other objects other than a circle? say a car represented by a rectangle? cheers.

    • 9 swingpants
      January 7, 2010 at 5:33 pm

      Yes, the method is excellent for detecting collisions with pixel perfect accuracy. In terms of applying ‘bounce’ impulses: when it comes to cars you’d need to think about crumpling – will the car dent or break up causing the bounce impulse to be deflected somewhat. This method does give you an initial impulse – which is a starting point for you to then implement some bespoke bounce method.

      Apologies to everyone – I promised a part 2 months ago and have yet to get around to it. Work commitments have kept me tied up. I do intend to do some more work on this in the very near future though.

  7. January 7, 2010 at 5:41 pm

    Thanks for the status update. Still eagerly (but patiently) waiting for part two!

  8. 11 P4INKiller
    March 1, 2012 at 3:19 pm

    Hey, thanks for this article, will definitely save me some headaches.
    I know it’s been a while, but I’m very interested to see a part two of this.

  9. May 8, 2012 at 12:58 pm

    I’m still waiting for part 2 😐
    I can’t figure out what you might have done with your recursive algorithm, I’ve implemented a similar method however it does not account for non-embedded collisions. Care to share? 🙂

  10. 15 aaron
    November 8, 2012 at 4:03 am

    Can you share the source files for Part 1, if you are not doing Part 2?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Swingpants at Flash on the Beach

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates

%d bloggers like this: