Collision Detection in 2D Platform Games

[FrancoisSoft]

Posted from my site.

Collision Detection in 2D Platform Games
Throughout the years I have experimented with collision detection. At first I created an arcade game and used points to detect collision. It worked and apparently I got it right but didn't know that. However, I wanted to refine it so I tried something else and did not get it quite right. Then, just recently, I used the old method that I used for collision detection and figured out that I had it right from the beginning! In this article I will go through the various collision detection methods that I used and why I chose them.

 

First Game - Weiny vs Tie Fighter
This game was one that I wrote over 10 years ago. It featured a guy dressed in a sausage suit fighting a Tie Fighter. The goal was to jump on the Tie Fighter or hit it with lasers. The game consisted of a number of phases where Tie Fighter would change its attack.

To do the collision detection I made the main character, Weiny, the object that was doing collision. I then placed a number of points around the object and checked to see which points were inside of the Tie Fighter. This method worked but then I found a problem with lasers going between the points.

For that I just checked if each point of the laser was inside of Weiny's bounding box.

 

September 2006 - Bluejay's Quest
In this game you play as a blue jay and fly around looking for breakfast eggs and eating insects. Some said it was a relatively unique concept. I have deviated from using the point-based collision detection seen in Weiny vs Tie Fighter because of the small object going between the points problem. Instead I used a matrix!

As you can see Bluejay lines up almost perfectly with the matrix and he can only move one square at a time. Speed is set by regulating how often characters move. This worked well but created jittery animation.

 

Recently - The Trail Hogs
This game is my take on Mario. I play as a cyclist with an unusual type of bike in a game of bicycle jousting. (For those who are curious if the bike exists look below.)

This time I'm doing collision detection the Mario way with all of the points. There are 8 points total excluding one on the bottom and another on the top.

As you can see there are two extra points for detecting edge collisions. That's something I was missing in Bluejay's Quest. (Enemies could just walk off ledges.) To do edge detection just see if any of the two points are over the edge of the floor or ceiling. Depending on the direction that the character is facing, the character turns in the opposite direction.

Why did I use this collision detection method from my first game if small objects can pass through? Well, mainly because smaller objects can simply be the ones's doing the collision and then send a signal to the main character! So it works out!

As with this collision detection method after you make an overlapping hit with a platform you set your x or y coordinate to the platform's y coordinate plus or minus the colliding character's dimension.

So something like this:

 

Afterword
I am still learning and have not mastered the art of collision detection in 2D games. I am currently learning hill based collision detection as well as programming weird movements into characters that defy the laws of physics. It is also possible that there is a better way to do collision detection that described here. If there is I will find it and post my newly gained knowledge here!

[Charles Augeard]

Hi,

Most of old games used a simple algorithm: AABB vs grid.

My demo in action here:

http://punkcoders.free.fr/platformer/ 

Character.prototype.moveInGrid = function ( speedX, speedY ) {

  if ( speedX > 32 ) speedX = 32;
  if ( speedX < -32 ) speedX = -32;
  if ( speedY > 32) speedY = 32;
  if ( speedY < -32 ) speedY = -32;
  
  // caching
  
  var cM = Level.COLLISIONMAP;
  var c=0, r=0, cA=0, cB=0, rA=0, rB=0;
  
  // move on X ---------------------------------

  this.x += speedX ;
  
  rA = ( this.y - 56 ) >> 5 ;
  rB = ( this.y + 55 ) >> 5 ; 
  
  // move right
  if ( speedX > 0 ) {    
    c = ( this.x + 31 ) >> 5;    
    for ( r=rA; r<=rB; r++ ) {    
      if ( cM[ (c&1023)+((r&31)<<10) ] == 1 ) {
        this.x = (c<<5)-32;
        this.onWall = true;
      }   
    }    
  }  
  // move left
  if ( speedX < 0 ) {    
    c = ( this.x - 32 ) >> 5;    
    for ( r=rA; r<=rB; r++ ) {    
      if ( cM[ (c&1023)+((r&31)<<10) ] == 1 ) {
        this.x = ((c+1)<<5)+32;
        this.onWall = true;
      }   
    }    
  }
  
  // move on Y ---------------------------------
  
  this.y += speedY ;
  
  cA = ( this.x - 32 ) >> 5;
  cB = ( this.x + 31 ) >> 5;
  
  // move down
  if ( speedY > 0 ) {
    r = ( this.y + 63 ) >> 5;
    for ( c=cA; c<=cB; c++ ) {
      if ( cM[ (c&1023)+((r&31)<<10) ] == 1 ) {
        this.y = (r<<5)-56;
        this.onFloor = true;
        this.speedY = 0;
      }
    }
  }
  // move up
  if ( speedY < 0 ) {
    r = ( this.y - 64 ) >> 5;
    for ( c=cA; c<=cB; c++ ) {
      if ( cM[ (c&1023)+((r&31)<<10) ] == 1 ) {
        this.y = ((r+1)<<5)+56;
        this.speedY = 0;
      }
    }
  }  
  

}