Collision detection and collision reaction is a fundamental concept in game design. From puzzles to platformers, shooting games to driving games almost every genre will involve collision detection of some kind.
Collision detection in theory is quite simple – knowing when 2 game objects (or a single object and a point) are at the same location on screen, and acting accordingly. You might need to detect the edge of an object, such as a car bumping into another car, or 2 pool balls knocking together. Alternatively you might want to know when 2 objects actually overlap, such as a character collecting powerups, or an explosion causing damage.
Once you have detecting a collision, you then need the game to react accordingly – known as collision reaction. For our pool balls that would mean calculating the new speed and directions of the balls, for our powerup it might mean increasing the speed or firepower of player’s character, and for our explosion it might mean causing damage, or creating another explosion…
I’ll cover collision reactions in a future article, today I want to discuss a number of methods for detecting collisions in Flash and which method to use for what effect.
Collsion detections in Flash
There are several ways to detect in game collisions in Flash, and the best one to use will depend on the situation. First let’s take a look at 2 methods commonly used for just this purpose – hitTestObject() and hitTestPoint()
hitTestObject() as the name suggests will return true if 2 objects are overlapping, while hitTestPoint() will return true if an point is within an object. These 2 methods however are the source of much confusion and frustration with people leaning to develop games in Flash, and unless they are understood properly you’ll find that your results won’t always match your expectations.
hitTestObject()
hitTestObject() works on the bounding box of an object. This is fine if both objects being tested are roughly rectangular in shape, but for most objects it will return true when we don’t want it to.
As you can see in the above example, with the 2 square movie clips (on the left) the bounding boxes match the size and shape of the objects so in this instance hitTestObject would return true, which is what we would expect. Rotate them through 45 degrees however, and and you can see in the example on the right, even with the objects some distance apart the bounding boxes still intersect. In this example hitTestObject would again return true, even though our objects are not really touching!
As you can see, using hitTestObject for all of our collision detection would cause all sorts of problems, so let’s take a look at a simple alternative – hitTestPoint.
As the name suggests hitTestPoint checks a single point against an object. It also takes an extra parameter shapeFlag which allows us to check against the bounding box of the object (false) or the actual shape of an object (true).
This is much better, as it allows much finer control but there is a problem – we’re only checking a single point, not an entire object. There is however a simple solution to this – we set up an array of points around an objects edge, and we use hitTestPoint on each of them!
hitTestPoint()
This second example shows 2 square movieclips both 10 pixels square. We store the co-ordintaes of each corner (0,0 – 0,10 – 10,0 – 10,10) in an array, and loop the array using hitTestPoint on each point in turn.
hitTestPoint would return true for both objects with the shapeFlash parameter set to false, since the top right corner of object 1 (10,0) is within the bounding box and so is the top left corner of object 2 (0,0). However, if we use hitTestPoint with the shapeFlag set to true only object 2 would register as a hit!
HitTestPoint is really useful in all sorts of games, from checking whether a character’s feet are on the ground, to reacting when a car veers off the road surface. There is however a better solution which we could use in our pool ball example from above.
Since balls by definition are round, so long as we know their radius we can simply check that against their distance from either the center of another ball, or a surface such as the cushion on the edge of a pool table.
This is very easy to do, and only requires one calculation (rather than looping through an array of points). We simply use Point.distance(x,y) and compare it to the radius of the object – if it is smaller than the radius we know there has been a collision and we can act accordingly!
For every action…
We’ve really only scratched the surface of collision detections here, but you can now see how important they are. The real magic begins when we use that information (that a collision has occurred) to cause a reaction – from bouncing a ball off a wall, landing a spaceship, or exploding a bomb! But that is a lesson for another day…
 |
