The Art of Collision Detection in AS3 – HitTestObject

In game development terms, collision detection is the process of ensuring multiple graphics are aware of their proximity to other objects, so it can stop one object’s movement before it “hits” another. This can be anything from bullets in a shooting game “killing” enemies, to your character in a platform game being able to jump onto “floors” and not through “walls”

Flash player 9 & 10, and AS3’s predefined classes provide several ways for a developer to set about working with the interaction between display objects. These vary in complexity so I’m going to start at the bottom with the HitTestObject function (I’ll address these in separate posts to make it more digestible). They also vary in function, sometimes it will be fine to use the HitTestObject class and it will suit your needs perfectly – other times, it simply isn’t a complex enough function to do what you need it to. In these situations you’ll have to upgrade your code to work with HitTestPoint, or even more advanced, Matrices.

The HitTestObject function requires you to declare a shape that you want to detect a collision with, in my example below – a shape called “blueSquare”. This “blueSquare” would be my spaceship / main character etc. if I were to be adding collision detection to a game.

It also requires a second shape to check against, so it can decide if the main shape (“blueSquare”) is in contact with the second shape (in this example, known as “redSquare”). This “redSquare” could be my walls and floors, my enemy character or the bullets my enemy is shooting at me.

One other thing to make you aware of; “redSquare” and “blueSquare” have drawn dynamically using code (I’ll do a quick run through of that in a future post) but for now, if you don’t know how to draw them dynamically, I’d recommend looking that up – or drawing them on stage manually and exporting for ActionScript. If you’re checking out collision detection I’m making the assumption you know how to draw a basic shape.

Therefore, in it’s most basic form, this is written –


blueSquare.hitTestObject(redSquare);


Broken down, this means – add the HitTestObject code to my blueSquare instance, and check to see if it is in contact with the redSquare instance (the instance declared in the brackets).
This will create a boolean reference within Flash to the HitTestObject – but if you want to know yourself, you’ll need to return or trace the value our HitTestObject function is returning. For example –


trace (blueSquare.hitTestObject (redSquare) );


Will trace out a boolean value; either true or false, depending on whether the two MovieClip’s are touching. Or –


if (blueSquare.hitTestObject (redSquare) )
{
trace("hit");
}
else
{
trace("miss");
}

This will trace either “hit” or “miss”, depending on which conditions of the IF statement are met. Both the simple trace and the IF statement have exactly the same end result – it’s just two ways of doing the same thing (but personally I prefer the IF statement as it allows you to add additional code later on).

That’s collision detection part one – HitTestObject, covered. BUT, if you have a play around with this you start to realise it’s good points and bad, and start to understand why there is more than one way of executing the same thing. Good points for instance – it’s so few lines of code! Bad points… try it with any shape except a square / rectangle and see what it says.

If you don’t want to play with it, here’s the answer – HitTestObject deals with all objects within their “bounding boxes” – even if you’ve drawn them using ActionScript. This means if your objects bounding boxes overlap, you will get a “hit” or “true” returned, even if the shapes don’t actually appear to be touching. The image “figure 2”, traces false, or miss – the objects are not touching. The image “figure 1” traces true, or hit – even though the objects are not technically touching, their bounding boxes intercept one another.

This works fine if you are creating a very simple game – Repton for instance, but if you want to create anything more complex you’ll have to come up with something different to detect your collisions (or come back once I’ve posted the next tutorials and take a look at them).

~ by pandaclaire on September 8, 2010.