Predicting Collisions - Page 3

In the previous page, I started explaining the code. Let's pick up where we left of with the code for our drawpath function.

initial_paths = [];

step = 10;

In the first line, I create a new, empty array called initial_paths. I initialize a variable called step with a value of 10 in the second line. The step variable specifies the number of path circles that will duplicate from your starting and end point.

The larger the number for step, the larger the number of path circles that will display. While that leads to a more precise collision detection, more circles also lead to a more CPU intensive collision detection.

circle._x = startX=eval(startMC)._x;

circle._y = startY=eval(startMC)._y;

We start by specifying the x and y positions of our circle movie clip. The starting point is determined by the x and y position of our circleMain movie clip. If you recall, circleMain is what is passed through to our drawpath function's startMC argument.

By using the eval statement, I am able to take the string circleMain and allow it to access the properties of the movie clip of the same name. I use the _x and _y properties to designate the x and y positions.

Notice that I am also storing the positions from our eval statements into our variables startX and startY.

for (i=1; i<=step; i++) {

duplicateMovieClip(circle, "circle"+i, i+10);

eval("circle"+i)._x += i*(finalX-startX)/step;

eval("circle"+i)._y += i*(finalY-startY)/step;

initial_paths.push(eval("circle"+i)._name);

}

I am creating a for loop that executes some code. Notice that I am starting the loop at 1 and ending the loop when i equals the value of step you specified earlier.

Note

The following pieces of code are placed inside our for loop. Each line of code is executed repeatedly for each value of i in our loop where i is less than or equal to the value of step as outlined above.

duplicateMovieClip(circle, "circle"+i, i+10);

In this line, I specify our circle movie clip to be duplicated. The new duplicated movie will have an instance name of circle plus whatever the value of i is for that particular iteration of our loop. So, you would see circle1, circle2, circle3, etc. as the instance names of the new circles.

Fixed Depth vs. nextHighestDepth()

Unlike my other tutorials, I am not using the nextHighestDepth function. Instead I use a real number, 10 and the index variable i as the offset. The following is my reasoning behind that design choice.
 
To simplify our code, I do not have a system where our existing duplicated circles are removed when you click on a new target in the stage. If I use the nextHighestDepth function, future path circles will simply appear along with my existing path circles from previous clicks on the stage.

That becomes a problem if I click on the stage multiple times. I would start to see a large number of path circles that are left over from previous clicks. But, if the depths were recycled, Flash will have to delete the earlier path circle to make room in the 'depth' for the new path circle.

By not using the nextHighestDepth function, no matter how many times you click around your stage, you will never exceed a depth of i+10. Therefore, by setting the value of our depth to be fixed, Flash automatically overwrites any old duplicated object at the depth with a newly duplicated object. In the end, you only see the number of path circles you specified in your step variable no matter how many times you click around.

eval("circle"+i)._x += i*(finalX-startX)/step;

eval("circle"+i)._y += i*(finalY-startY)/step;

These two lines specify the x and y position of each of our duplicated circles as you progress through the loop. Notice that I am again using the eval statement to access a movieclip instance by using a combination of variables and strings.

The expression to the right of the incrementing operator ( += ) specifies the actual position our circle will be stored. It is just simple trigonometry once you think about it. Basically the expression ensures that all of our circles are spaced apart evenly, and that our circles neatly reach our final destination regardless of what our value of step is.

initial_paths.push(eval("circle"+i)._name);

Do you remember the initial_paths array we declared earlier? It is finally used here. Each of our path circles' named are added as a value to our initial_paths array by means of the push function.

At the end of our for loop, our initial_paths array will contain the name of each path circle duplicated.

collisionDetect();

The last thing I do in our drawpath function is make a call to a function called collisionDetect. In the next page, I will explain what collisionDetect does and the code behind it.

Onwards to the next page!

page 3 of 6