kirupa | 23 October 2005
games, simply detecting a collision when an object hits another object is enough. That sort of collision, covered in an earlier tutorial, is great for
games such as pool or mini-golf where collisions occur only when two objects
physically touch each other.
But, you also have a different type of of collision. Many
games today feature opponents who dodge and weave as you try to hit them. Games
such as Zelda have opponents who slide and weave when you fire a slow-moving
projectile such as a bow from your arrow, etc. You need some way of having your
opponents be able to predict collisions from your attacks.
Being able to predict a collision and react
accordingly adds some primitive level of intelligence to your targets. I will
explain one simple way of predicting collisions that Flash can computationally
Click near any of the above balls and notice that they move
out of the way if they lie in the path of the darker blue ball.
Unlike other tutorials on this site, I will not have you go
through the formalities of drawing the circles, making them movie clips, giving
them instance names, and copying and pasting some code. Instead, I will provide
the final source code for you to download so that I can focus more on explaining
the idea and code behind predicting collisions.
Once you unzip and open the above FLA file, you should see a
lot of circles displayed in your Flash window:
[ a guide of all
elements displayed in our FLA file ]
In the above image, I have labeled the three main elements of
our image. First, we have our main circle that moves to the point where
you click your mouse.. The targets are obstacles that will move out of
the way when our main movie clip approaches.
The path circle is different, and I have explicitly made it
visible for the purposes of explaining what it does. Preview your animation in
Flash and click somewhere in your movie clip. Notice that your path circle
propagates itself towards the area of your click:
[ our path
circles in action ]
The circle movieclip (the pink circle) acts like the guide that scouts
out the path your main movieclip passes through. Any target circle that
happens to collide with any of the pink guide circles will move out of the way. In my
example above, I have set the path circles to be invisible, for it is a detail
that the user does not need to be aware of.
For reference, the path movie clip has the instance
name circle. The main circle that moves has the instance name
circleMain, and the 7 target movie clips contain the names t1, t2,
The structure of this animation can be divided into 4 parts:
Moving the main circle after a mouse click
Drawing the path of circles to our destination
Moving colliding circles away
In the next page
I will start to explain the code that gets everything working.
page 1 of 6