Predicting Collisions

For many 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 handle:

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.

Download FLA for Flash 8 and Flash MX 2004

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, t3,...,t7.

The structure of this animation can be divided into 4 parts:

1. Moving the main circle after a mouse click

2. Drawing the path of circles to our destination

3. Detecting Collision

4. Moving colliding circles away

In the next page I will start to explain the code that gets everything working.

page 1 of 6