Travels

Wednesday, August 6, 2008

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.

1 comment:

Anonymous said...
This comment has been removed by a blog administrator.