Games Programming - 3

Detecting Collisions

One of the main functions of an 'action' computer game is determining when objects collide or otherwise come into contact with each other. This may be used to determine a player's death e.g. when he comes into contact with an enemy bullet, or it may be to determine if a player is close enough to an object to pick it up.

In this tutorial we will use the example from Games Programming 2, and create an object for our player character to collide with. If the player character collides with that object, the game will end, and a suitable message will be displayed.

Before we start, I'm assuming you have completed Games Programming 2 and have a player character that can move UP, DOWN, LEFT and RIGHT.

  1. Open the Flash Movie you created for lesson 'Games Programming 2'.

  2. Insert a new Movie Clip symbol and draw a filled oval - this will represent the object that our player character can collide with.

  3. Back in the main Scene, create a new Layer, then drag an instance of the new 'collision' object from the Library onto the stage. Name this instance 'obstacle'.

  4. Select the 'obstacle', then open the Actions Panel. We will add some code here to detect if the Player Character has collided with this obstacle. First you need to create an enterFrame clip event, then add a conditional statement that says 'if this object collides with the player character, then end the game'. The method used to determine if two objects collide is called hitTest(). Add the code below to the Actions Panel:
    onClipEvent(enterFrame){
    	if (this.hitTest(_root.player)){
    		_root.gotoAndStop("endgame");
    	}
    }
    

    The code says, 'if this object collides with the player, tell the main timeline to goto and stop at the frame called endgame'.

  5. We haven't currently got a frame called 'endgame' on our main timeline yet, so lets set this up. Firstly though, place a stop() command in the current frame of the movie - this will stop the movie playing right through and looping.

  6. Next insert a new blank keyframe at Frame 2 of the main timeline. Label this frame 'endgame'. Place a stop() command in this frame.

  7. Also on this new frame, place some static text saying 'Game Over'.

  8. That's pretty much it - try it out below-

A point of note about the hitTest() method is that the area used to detect a collision is the 'bounding box' of a symbol, i.e. a rectangle the width and height of the symbol. That means that this method of detecting a collision is not very accurate for non-rectangular shapes. Don't worry too much about that right now - basic collision detection is fine for most simple games, and by the time you're experienced enough to make complex games, you'll be able to figure out how to do more sophisticated collision detection.

Additional things to try

  1. Moving obstacles would be a better challenge!

  2. Turn the game around - instead of avoiding objects to win, try collecting objects instead. They could appear randomly on the screen, at random positions and you have to collide with them before they disappear again.