Predicting Collisions - Page 2

In the previous page, I explained the basic idea behind how our collision prediction system works. There is a substantial amount of code for this effect, so I would like to start with the code now!

You can view the code by selecting the first frame of your action layer and pressing F9 or by going to Window | Development Panels | Actions.

Code Explained

circleInit = function () {

speed = 10;

this.onMouseDown = function() {

endX = _root._xmouse;

endY = _root._ymouse;

drawpath("circleMain", endX, endY);

diffX = Math.abs(circleMain._x-endX);

diffY = Math.abs(circleMain._y-endY);

};

this.createEmptyMovieClip("circleHelper", -2);

circleHelper.onEnterFrame = function() {

circleMain._x += (endX-circleMain._x)/speed;

circleMain._y += (endY-circleMain._y)/speed;

};

};

circleInit();

This is our circleInit function. Its main job is to move our circleMain movie clip to the point on the stage where you clicked. There is a slight ease, and as you can tell, the code behind it is fairly straightforward. The code is a revised version taken from Lostinbeta's Easing on Mouse Click Tutorial, and he explains how the easing works in his tutorial.

Next, I want to point your attention to these three lines of code:

drawpath("circleMain", endX, endY);

diffX = Math.abs(circleMain._x-endX);

diffY = Math.abs(circleMain._y-endY);

The first line calls a function called drawpath that takes in three arguments: the movieclip name, the destination x value, the destination y value. The variables endX and endY store the x and y  position of our mouse pointer when you clicked on the stage. For movieclip name, we provide the instance name of our circle - circleMain.

The above lines of code execute only when you click and release your mouse button. So, even if you move your mouse around after having clicked, the values of endX and endY will only have the stored x and y mouse positions from your click.

initial_targets = ["t1", "t2", "t3", "t4", "t5", "t6", "t7"];

The above array, initial_targets, stores the instance names of our path circle movie clips found on our stage.

If you make any changes to the instance names on your stage, be sure to edit the appropriate entry in the array. Likewise, if you change any entry in the array, make sure that the change is reflected in the instance name of your movie clips on the stage.

drawpath = function (startMC, finalX, finalY) {

initial_paths = [];

step = 10;

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

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

for (i=0; 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);

}

collisionDetect();

};

The above is our drawpath function that is responsible for duplicating our path circle movie clip from where your circleMain movieclip is to where you want the circleMain movieclip to go.

This function takes in three arguments that I briefly outlined above in the function call for the circleInit function. The first argument refers to the x and y position our path circles will originate from. In our case, that will always be our circleMain movieclip. The finalX and finalY values are the x and y positions of the point where you clicked in your stage.

In the next page, I will cover the drawpath function in greater detail and tackle more of the remaining code.

Forward to the next page!

page 2 of 6