Collision Detection Among Multiple Objects
       by kirupa  |  12 August 2005

Now that you have your Flash animation working from the previous page, let's take a look at why it works.

ActionScript Explained
Let's find out what part each line in our above code plays:

target_mc = ["circle0", "circle1", "circle2", "circle3", "circle4", "circle5"];

I declare an array called target_mc, and its values are the instance names of the movie clips that we are interesting in testing for collisions. If you recall, in the FLA you have open, the circles have the instance names circle0, circle1, etc.

Your movie clip names do not have to follow the name + number format as my movie clips though. You can give them as strange a name as you want. As long as your movie clip name is mentioned in the above array, Flash will read it.

Also, you can use a loop to populate the target_mc array as movie clips get added to your stage. One of the FLAs I will provide towards the end of this tutorial contains a series of circles that are simply loaded from the Library using the attachMovie command.

hitTester = function () {

I will be placing all of my code inside a function called hitTester. In the past, I encouraged using functions because it is simply easy to manage the code. In this case, using a function is absolutely necessary, for we will be calling our hitTester function numerous times to run the collision detection code contained within it.

numCircles = target_mc.length;

Since our target_mc variable is an array, I can use the length property to count the number of items in our array. I store the number of items in our array in a variable called numCircles.

for (i=0; i<numCircles; i++) {
circleA = target_mc[i];

This is the first of our two for loops. The loop ranges from 0 to the number of items stored in your array. For each value of i, the variable circleA stores a movie clip name from our target_mc array.

for (j=i+1; j<numCircles; j++) {
circleB = target_mc[j];

This is our second loop. It gets accessed for each value of i in the first loop, but notice its range. It's range isn't from 0, but instead, its range starts from i+1. Starting at that value ensures that we don't revisit movie clips already covered by our first loop. This is what makes our more efficient collision detection code better than our, well, less efficient collision detection code.

Similar to how I used circleA in the first loop to store a movie clip instance name from our array, I use circleB to store a second movie clip instance name from that array. So, right now, both the circleA and circleB variables store a movie clip instance.

temp_A = eval(circleA);
temp_B = eval(circleB);

I store the reference to the circleA and circleB values via the eval function in the temp_A and temp_B variables. I do that because I will be using eval(circleA) and eval(circleB) a lot in the next few lines of code. Storing it as temp_A and temp_B simply saves me time in having to type extra characters.

if (temp_A.hitTest(temp_B)) {
// Your code
dirChanger(temp_A, temp_B);

The first line checks if the two movie clips stored in temp_A and temp_B collide with each other. The ordering of the movie clips in the hitTest function doesn't matter. If you were to use temp_B.hitTest(temp_A), you would get the same result. That is why, if you remember, I didn't mind flagging a lot of redundant collision checks in our "Less Efficient Method".

The hitTest function returns a boolean value, so we don't need any conditional such as == in our if statement. If there is a collision, I simply make a call to a function called dirChanger that takes in our temp_A and temp_B values to move our circles around.

I won't elaborate on the rest of the code, for that really deviates this tutorial's goal of explaining collision detection involving a lot of objects. I have provided several FLAs that use the same collision detection code but have some minor variations that you may find useful for your projects.

Tutorial Source - Final
Dynamically Created Movies with Collision
Collision with Mouse Follow/Click

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!


page 3 of 3


SUPPORTERS:'s fast and reliable hosting provided by Media Temple.