by
kirupa | 23 October 2005In 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.
- 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 |
 |
|
Predicting Collisions - Page 2
