Flash Tutorials: Collision Detection	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Collision Detection

Free Tutorial

Learn how to make a basic maze game with collision detection. Collision detection is useful in many different game type scenarios and is easier than you might think. The Collision Detection ensures that the Blue Ball (or Player) does not cross the red lines of the Maze.

Example: Download the Flash file  Int 132a

Click on the Movie above and use your Keyboard Arrows to Control the Blue Ball.

Step One: Setting Up the Movie

1. Open a new: Flash Movie
2. Go to: Modify > Document
3. Set the Movie to: 550 x 400
4. If you wish set a: Background Colour
5. Click: OK
6. In the Timeline right click (Mac: Ctrl click) Frame 3 and select: Insert Frame
7. In the Timeline use the Insert Layer button to add 5 Layers so you have a total of: 6 Layers
8. Name the Layers as follows:
   
   
   Your Timeline should look similar to this.

Step Two: Creating the First Frame

1. Select Frame 1 of the: Text & Button Layer
2. Create a button with a Label: Click to Play

Note: If you wish drag out one of the Standard Buttons from the Common Library: Window > Other Panels > Common Libraries > Buttons (do not use a Knob, fader or Component)

3. Attach the following ActionScript to the Button:

on(release){
    gotoAndStop(2);
}

Note: The reason that you need this is to make sure the Flash Movie is in Focus. Otherwise when the player goes to use the Arrow Keys on their Keyboard the web page will scroll up and down instead of the Flash Movie responding to the Key commands.

4. You don't want the Button to be visible on the next frame so:
   
   Right click on Frame 2 of the Text & Button Layer and select: Insert Blank Keyframe
   
   
5. Select Frame 1 of the: Background Layer
6. Place any other graphics on this frame that you may want. I have placed a shadow of the Maze in this frame. If you wish to do this come back and do this latter when you have finished creating the Maze: Create a Background
7. You don't want the Background to be visible on the next frame so:
   
   Right click on Frame 2 of the Background Layer and select: Insert Blank Keyframe
   
   
8. Select Frame 1 of the: ActionScript Layer
9. Attach the following ActionScript to Frame 1:

stop();

Your Timeline should now look similar to this.

Step Three: Creating the Player

In my case the Player is the small blue circle:

1. Right Click on Frame 2 of the Player Layer and select: Insert Blank Keyframe
2. Select the Oval Tool:
3. Create a small: Circle (or square if you prefer)
4. In the Property Inspector set the size to: 8 x 8 pixels

Note: It must be easily small enough to fit through the Maze.

5. Return to the standard Selection tool:
6. Select the: Circle (make sure the whole thing is selected)
7. Right click the Circle and select: Convert it to Symbol
8. For Name type: player
9. For Behavior select: Movie Clip
10. Click: OK
11. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
12. Give the Movie Clip an Instance Name: player

Step Four: Creating the End

When the Player hits the object called the End the Movie will go to the next frame. In theory the End could be invisible. My End looks like this:

1. Right Click on Frame 2 of the End Layer and select: Insert Blank Keyframe
2. Select the Rectangle Tool:
3. Create a small: Rectangle
4. In the Property Inspector set the size to about: 30 x 20 pixels

Note: Don't make it too small or your Player could jump right over it rather than hit the end.

5. It you wish select the Text tool and type: END
6. Return to the standard Selection tool:
7. Select the: Rectangle (make sure the whole thing is selected)
8. Right click the rectangle and select: Convert it to Symbol
9. For Name type: end
10. For Behavior select: Movie Clip
11. Click: OK
12. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
13. Give the Movie Clip an Instance Name: end

Step Five: Creating the Maze

1. Right Click on Frame 2 of the ActionScript Layer and select: Insert Blank Keyframe
2. Select one of the Drawing tools such as the Pen Tool:
3. Draw your: Maze Walls

Note: If your Maze drawing is going to very complex I suggest you only draw a small section of the Maze to start with. You can come back and add to the drawing latter. If the walls are too thin or the path (where your blue dot moves) is too narrow you may find that the Player goes straight through the walls. The thicker the Walls and the wider the Paths the faster you can make your Player move so try not to make the walls too thin.

• My Walls are at least: 6 Pixels Thick
• My Paths are at least: 10 Pixels Wide
  
  
4. Return back to the standard Selection tool:
5. Select the: Drawing (make sure the whole thing is selected)
6. Right click the Maze drawing and select: Convert it to Symbol
7. For Name type: walls
8. For Behavior select: Movie Clip
9. Click: OK
10. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
11. Give the Movie Clip an Instance Name: walls
12. Right Click on the Movie Clip again and select: Convert it to Symbol
13. For Name type: maze
14. For Behavior select: Movie Clip
15. Click: OK

Note: This creates a series of nested Movie Clips one inside another. The Walls Movie Clip is inside the Maze Movie Clip. The Maze Movie Clip is on the Main Stage:



16. Attach the following ActionScript to the outside of the Maze Movie Clip:

onClipEvent (enterFrame) {
    with (_root.player) {

        // Controls Player Speed
        mySpeed = 3;

        // Controls how far the Player bounces off the wall after impact
        myBounce = 3;

        // keyboard controls
        if (Key.isDown(Key.DOWN)) {
            _y += mySpeed;
        }
        if (Key.isDown(Key.UP)) {
            _y -= mySpeed;
        }
        if (Key.isDown(Key.LEFT)) {
            _x -= mySpeed;
        }
        if (Key.isDown(Key.RIGHT)) {
            _x += mySpeed;
        }

        // detect if edges of the player is colliding with the Maze Walls
        if (walls.hitTest(getBounds(_root).xMax, _y, true)) {
            _x -= myBounce;
        }
        if (walls.hitTest(getBounds(_root).xMin, _y, true)) {
            _x += myBounce;
        }
        if (walls.hitTest(_x, getBounds(_root).yMax, true)) {
            _y -= myBounce;
        }
        if (walls.hitTest(_x, getBounds(_root).yMin, true)) {
            _y += myBounce;
        }

        // detect if Maze is finished
        if (_root.end.hitTest(_x, getBounds(_root).yMax, true)) {
            _root.gotoAndStop(3);
        }
    }
}

Step Six: Frame 3

1. Right Click on Frame 3 of the Text & Buttons Layer and select: Insert Blank Keyframe
2. Type something like: You One !!
3. Create a button to return and play again: Replay Button
4. Add the following ActionScript to this Button:

on (release){
    gotoAndStop(2);
}

Step Seven: Testing the Movie

1. In Frame 2 position the Player Movie Clip at the: Start Position
2. In Frame 2 position the End Movie Clip at the: End Position
   
   Building the Movie is now complete. What you are testing is that the Player does not wobble or go straight through the walls.
   
   The Wobbles
   The Player may vibrate if the path between the walls is not big enough and the bounce is too big:
   
   
   
   To resolve this either:
   
   • Make the variable myBounce smaller
   • Make the Player smaller
   • Make the Path (gap between the walls) bigger

   No Hit
   If for example you speed (variable mySpeed) is 3 then the Player only exists every 3 pixels. This animated effect looks like a smooth motion but in fact it is not. If your wall is thinner than this the Player will simply jump right over the top although it looks like the Player goes through the wall rather than a jump. Even if you think your walls are thick enough you may occasionally get this problem. This is because of the bounce plus the speed plus the size of the Player plus the width of the walls all go into the calculation that controls the movement of the Player. This can occasionally give you unexpected results. If the hit does not work correctly then the Player may simply go right through the walls.
   
   To resolve this try the following:

   • Make the variables myBounce and mySpeed smaller
   • Make the path (space between the walls) larger
   • Make the walls thicker
   • Make the Player size either bigger or smaller
     
     Note: I have found that the variables myBounce and mySpeed are more likely to cause problems if they are set to different values. So I suggest that if you change one you change the other.
     
     
3. Test your Movie: Control > Test Movie (Ctrl Enter)

   Note: If you need to edit the Maze drawing it is no longer on the Main Stage but nested inside the Movie Clips. Keep double clicking on the drawing until it becomes selected.

Just for fun:

Example: Download the Flash file  Int 132b

More of an Obstacle Course than a Maze.

Because of the organic nature of the walls in the Movie above you may find that it is much harder to test if the hit always works and all the walls are all solid. You literally need to test them all!!

That's it !!