Learn to program collision detection for games in Adobe Flash & ActionScript 2.0

The game so far

So far, your game is lacking a few things, Hopefully, you've had a solid understanding of how you can move objects around on the screen. You also learned how to make dynamic text boxes that allow you to keep track of the score. Today you'll learn how to program the rest of the game, since it's due next week.

So far, your code should look something like this:

onClipEvent(load)
{
    xspeed=10;
    yspeed=10;
}

onClipEvent (enterFrame)
{
    _x+=xspeed; //move the ball in the x direction
    _y+=yspeed; //move the ball in the y direction
    
    if (_x>540) // is the ball hitting the right side of the screen
    {
        xspeed*=-1; //change the direction of the ball    
    }

    if (_x<10) // is the ball hitting the left side of the screen
    {
        xspeed*=-1; //change the direction of the ball    
    }
    
    if (_y>390) // is the ball hitting the right side of the screen
    {
        yspeed*=-1; //change the direction of the ball    
    }

    if (_y<10) // is the ball hitting the left side of the screen
    {
        yspeed*=-1; //change the direction of the ball    
    }
    
}

Simple collision detection

Collision detection is very important for game development. There are two kinds of automatic collision detection methods available in Flash. We'll cover collision detection in more detail when we build the asteroids like game, but for the time being, let's talk about movie clip to movie clip collision which is relevant to our game.

The command you need to use is called hitTest. If you have two movie clips on the main timeline, one named "square" and one named "ball", you can check to see if the ball is hitting the square by typing this command inside a onClipEvent(enterFrame) event handler on the ball: this.hitTest(_root.square); We can easily create a movie clip with a moving ball by adding _x+=10; to the enterFrame handler and check for when the hit occurs with an if then statement:

onClipEvent(enterFrame)

{
     this._x+=10;
     if (this.hitTest(_root.square)
          {
               trace("I'm being hit");
          }
}

You could do the same thing from within the square to see if it was being hit by a ball.

Collision Detection

Your game is starting to take shape. Now we need the ball to bounce off the paddle instead of bouncing off of the bottom of the screen. Collision detection is very important for game development. There are two kinds of automatic collision detection methods available in Flash. We'll cover collision detection in more detail when we build the asteroids like game, but for the time being, let's talk about movie clip to movie clip collision which is relevant to our game.

First, start off by taking out the piece of code on your game that bounces the ball off the bottom. This should be pretty easy to find.

Next, you need to use a method called hitTest. If you have two movie clips on the main timeline, one named "square" and one named "ball", you can check to see if the ball is hitting the square by typing this command inside a onClipEvent(enterFrame) event handler on the ball: this.hitTest(_root.square); We can easily create a movie clip with a moving ball by adding _x+=10; to the enterFrame handler and check for when the hit occurs with an if then statement:

onClipEvent(enterFrame)

{
     this._x+=10;
     if (this.hitTest(_root.square)
          {
               trace("I'm being hit");
          }
}

You could do the same thing from within the square to see if it was being hit by a ball. Let's take a loot at an example and try to recreate it in class.

Create a new movie and make it 100 pixels tall. You'll need to create a ball movie clip instance and a paddle movie clip instance as well as a dynamic text box. Make the ball bounce on the right and left of the screen using code similar to what you're doing for the breakout game. On the dynamic text box, you'll reference it to a variable called "myvar". On the paddle put the following script:

onClipEvent(enterFrame)
    {
        if (this.hitTest(_parent.ball))
            {
                _root.myvar="OUCH";
            }
        else
            {
                _root.myvar="";
            }
    }

We'll need to apply this to our paddle. On the paddle, well need to have a hittest to determine when the ball hits the paddle and reverse the vertical direction of the ball when it does.

Blocks

The blocks pretty much behave like stationary paddles, so you can use code that is very similar to the paddle to make these work.

Making a paddle

The mouse object has a couple of very useful properties, called the _xmouse and _ymouse properties. They keep track of the current mouse location relative to the current timeline. These properties can help us easily build a paddle for our game. First, you'll need to draw the paddle at the bottom of the screen, so grab the square tool and make a square at the bottom of your screen, then convert it to a movie clip.

We want this paddle to keep up with the mouse location. We'll need to add some actionScript to the movie clip. Because it's on a movie clip, we'll need to use an event handler. We'll have to use the onClipEnvent(enterFrame) because it's the one that makes the most sense. Everytime the movie enters a new frame, we want the horizontal position of the paddle to match the horizontal position of the mouse. The script will look like this:

onClipEvent(enterFrame)

{

    _x=_root._xmouse;

}

Why did we use _root._xmouse instead of just _xmouse. The problem is that the _xmouse (and _ymouse) property will give you the mouse coordinates relative to the current movie clip. Remember that movie clips have their own coordinate systems, so in this case simply putting _xmouse would give us the wrong values. Notice that _parent._xmouse will work just as well as _root._xmouse because of this movie's hierarchy

blog comments powered by Disqus