Metamorphosis Game Demo: A Study in Bitmap Collision Detection

It's been a while since I mentioned Bitmap Collision Detection and I thought a game demo was in order. As I mentioned earlier Bitmap Collision Detection works by taking a small sample area and seeing if it contains certain colors or if it's colors reach a set threshold. Below is a demo of a game I'm working on called Metamorphosis (inspired by Kafka's work of the same name). To play you simply make your way through the maze of dark objects without touching any of them.

So far this game runs very well. The only problem I've found with it is that if you move the mouse very quickly you are sometimes able to skip over dark sections. This is more due to sample rate rather than the type of the detection. Regardless of it's shortcomings, Bitmap Collision Detection has worked very well in my tests and it has the benefit of creating new levels with minimal code. In the Metamorphosis demo adding a new level is a simple matter of adding a reference to the movie clip containing the level art to an array which keeps track of the levels. The game plays through the level and once it is passed, moves on to the next level on the list without any additional collision detection code.

Bitmap Collision Detection

Since I got into bitmap data manipulation I've been coming up with some pretty strange ideas of what to do with it. Bitmap collision detection was something I thought up a couple months ago and was curious to see if it was possible.

The basic idea is that you are taking a snapshot of the screen on every frame (or whenever you want to detect collisions) and then using a very small sample area you check for colors or a range of colors. If you find the colors, then a collision occurs.

I made a basic demo of the idea for you to play with here: http://www.sizzlepopboom.com/toys/bitmap_collision_demo.html

Draw some lines by dragging the circles around. When you mouse over red, green, or blue, it will display a hit detected result. The sample area used for detection is a 12x12 pixel square centered on the mouse. This square is displayed in the demo at the top left.

This demo shows how you can detect not only collisions but colors of collisions. Taking the example of a sidescroller, you could set red to mean fire, blue to mean water, and use green for walls. When a character traveling through the sidescroller encounters one of these colors they could respond by burning up, drowning, or coming to rest after a jump or fall.

The best part about using bitmap collision detection in this sidescroller example is that to create a new level, you could just make new art and not do additional programming. Also as demonstrated in the demo, you can draw new collision areas during runtime.

In order to make the levels look nicer another trick could be used. First you create the final art for the level, then using that as guide to draw a piece of art the same size draw in the collision areas. Then when you play move the two pieces together but detect collision only on the hidden piece. This way you can use any colors you want for the final art and still have the ease of drawing in collision areas.

Bitmap collision detection also has the benefit being independent from the shape of the object being detected. Because there is no need to worry about bounding boxes, complex shapes (spiral) and simple shapes (rectangle) are detected using the same technique.

Using bitmap detection it would be possible to make a sidescroller template that would allow users to add their own custom artwork and make it playable without any coding on the user's part. Bitmap Detection so far hasn't been too processor intensive but should it prove to be a problem, things could be made more efficient by checking every other pixel in the 12x12 sample area.