Hit Test (Collision Detection)

filed under Flash and ActionScript

To make your movies more interactive, Flash 5 included numerous built-in functions that automated the process of movie clips interacting with other objects. One such function is HitTest. HitTest enables you to ask Flash "Is this movie clip colliding or in contact with that movie clip?". If Flash could talk, it would say, "Yes, Masta Flash Programma, the movie clip is in contact with this movie clip!" or "No, the movie clip is not in contact......!".

Let's tune back into the world of reality. The following animation is a good example of the HitTest function at work:

To make your strenuous programming life easier, I have provided an incomplete source file for you to work on. Don't worry, the source file does not include the ActionScript necessary to make the hit test work. The animation merely contains the movie clip of the circle and the square. Click the link in the following table to download the incomplete FLA file for this tutorial:

Here is how to program HitTest:

1. Open the hittest.fla file you downloaded from the above link.
    
2. Select the circle movie clip. Once the circle movie clip has been selected, click the Instance tab to display the Instance panel. In the Name field of the Instance panel, enter the word circle:

[ the movie clip has been given the name 'circle' ]

3. Because it takes at least two objects to create a collision, you will need to name the second object: the square movie clip. Select the blue square and give it the name: block. You would enter the word 'block' in the Instance panel just like you did for the circle movie clip in Step ii.
    
4. Once you named the block movie clip, it is time to add the actions. Right click on the circle movie clip and select Actions. The Object Actions window will appear. Copy and paste the following code into that window:

onClipEvent (enterFrame) { if (_root.circle, hitTest(_root.block)) { _root.text = "Collision Detected"; } else { _root.text = "No Collision"; } }

[ copy and paste the above code in the Object Actions window ]

5. That's it! You are done with creating the hitTest function. The following section explains every detail of the code you simply copied and pasted. Preview the animation to see it work!

How Does the Code Work?
The following section will basically deconstruct how the code you copied and pasted enables Flash to determine whether a collision occurred or not:

                      onClipEvent
  (enterFrame) {

  if (_root.circle,
  hitTest(_root.block)) {

  _root.text = "Collision Detected";

  } else {

  _root.text = "No Collision";

  }

  }

  

The first line is the On handler for the movie clip. The code following this statement will be enabled each time the frame of the movie clip loads. Basically, enterFrame, enables the action to loop continuously. The enterFrame handler really simplifies the developers life by enabling him to not have an empty movie clip with actions on two blank keyframes to create a loop.

                      onClipEvent
  (enterFrame) {

  if (_root.circle,
  hitTest(_root.block)) {

  _root.text =
  "Collision Detected";

  } else {

  _root.text = "No Collision";

  }

  }

This line contains the if action and the hitTest function (I know I'm pointing out the obvious). I am not going to go into great detail into the if statement because this tutorial does not deal with the if function. Click here for a good tutorial on how to use the if statement.

The hitTest function basically follows the following syntax:

if (movieclip1,
  hitTest(movieclip2))
  {

  actions

  }

You can expand upon the if statement as you see fitting. In my example, I added the else argument as well. Enough with if, let's talk about the code highlighted in green. The movieclip1 is the movie clip you are using as your control. This movie clip is used by hitTest to see if anything 'hit' it.

Movieclip2 is the bully movie clip. This is the clip that will go hit your good movieclip1. The hitTest function simply asks, "Did movieclip2 go hit movieclip1" If movieclip2 did hit movieclip1, then there was a 'hit'. There was a collision. If movieclip2 did not go hit movieclip1, there was no collision.

If you have some prior programming language, you might have inferred that the hitTest function is a Boolean expression. When the hitTest function is invoked, you will basically get a "Yes" or "No" response; a 1 or 0. That's why you don't see an equal operator in the first line of the if statement. Flash automatically understands there should be a ==1 after the parentheses in the if statement.

                      onClipEvent
  (enterFrame) {

  if (_root.circle, hitTest(_root.block)) {

  _root.text =
  "Collision Detected";

  } else {

  _root.text = "No Collision";

  }

  }

This line features the action that will start if "hitTest" is deemed to be true. In other words, if there is a collision between the movie clips, the action in this line will start.

                      onClipEvent
  (enterFrame) {

  if (_root.circle, hitTest(_root.block)) {

  _root.text = "Collision Detected";

  } else {

  _root.text = "No Collision";

  }

  }

If Flash determines, by means of the hitTest function, that a collision did not occur, the action following the else statement will execute. This line is entirely optional. You can simply end with the if statement. I included else to display the text 'No Collision' when there was no collision.

Downloads

Even though I make every effort to make sure that my tutorials are legible and understandable for all users, I am also infallible. Therefore, I have provided the final source code for you to see how the animation I used to write this tutorials turns out.

ConclusionThese two sentences conclude the section on detecting collision. This is a fundamental Flash function that you will use when creating games, shopping carts, drag-drop features, and more! The following animation shows a basic use of this function:

[ download FLA for above animation by clicking here ]

[../../pages/me.htm]

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇