Lite Bitmap collision detection on AS3

Written by Gilles on December 19, 2011

Lot of physics librairies like box2d has been ported to make game developer life much easier especially for complex physics. In case of simple platform or old school beat them all game, using these librairies can be pain for developper and CPU to get simple behaviour with collision detection. What we’ll illustrate here is how to get hard collision detection using optimized methods and how to implement it with Starling API

Download all the sources here

Collision detection

In order to limit CPU usage, we split detection in two phases:

phase 1 : rectangle intersection

This phase checks if our two sprites bounds rectangles intersect by using AS3 native intersection method. This function return a rectangle which represent collision area of the two rectangles. If intersection area has no width and no height it means there is no collision.

no collision

collision

Phase 2 Bitmap hitTest

On that stage we know that our two sprites rectangle hit themself, we can go further by using checking pixels collision with bitmapData hitTest function.

Avoid overlapping

In case of platform game, main character must not cross a block, developper has to find a way to adjust character position in order to make it just touch the wall.

First, we have to know where is the collision and we already got it on first hit test phase from rectangle intersection function. Second thing we have to determinate to what direction we have to move character. This direction will be calculated by comparing the position of intersection rectangle and wall rectangle.

 

You can see from above that wall is splitted in 4 area (North, East, South, West) with diagonal boudaries. we determinate in what area is the intersection rectangle (hit point position) is and then move 1 pixels to the right direction until there is no pixel collision.

Handle different baviour
This 4 side collision detection principle has its limit, for some shape of bitmap we will have strange behaviour (example below).

 

It would be interesting to handle behaviour differently in function of what kind of element we have. For example ground should force character to go up.

 

Integration with starling.

Starling is a display framework which allow developper to use flash player 11 stage 3D API. It replicate the display list structure to gpu, so it’s pretty easy for any flash developper to get into it. Here is more info about Starling.

We created two classes LitePhysicsData and LitePhysicsCollision: maybe there is a more structured way to do it but we want to keep it simple.

LitePhysicsData is a link between sprite and physics data, and it implements hitTest and collide function.

LitePhysicsCollision store collision data and manage active elements behaviours.

Now it’s pretty easy to use these two classes. here is simple example. here is an example starling sprite class.
We assume you have some basics with starling.

Download all the sources here