Collision Detection Platforms

Introduction When it comes to 2D games, one of the most common game mechanics is the ability to jump on and interact with platforms. For example, in Super Mario Bros. 1, you could: Jump on top of them Break some from underneath (as well as kill/stun the enemies directly overhead) You could bounce off the sides Some platforms moved with the player on top, etc. So, what’s the big deal, can’t we just use Box-to-Box collision? Yes…and no.

What’s the Problem? The problem with testing the bounding box is simply that it is not accurate enough. You need to know what part of the player is hitting the platform. One box cannot do that. The solution: Use 2 stage collision detection

The Idea… Imagine Mario in his bounding box, as shown below We need to break him up based on how he may potentially interact with the platforms Feet (land on top of platform) Head (Hit platform from below) Right side (bounce off a platform, or zero horizontal positive speed) Left side (bounce off a platform, or zero horizontal negative speed)

The Strategy We know that we will be doing this collision test a lot We want to reduce the work as much as possible, which is why we use the 2-stage process. The four sub rectangles are ONLY tested for collision if there is a collision with the bounding box We can set up the rectangles at two points: We set them up when the image is loaded, but we will need to maintain their locations by moving them whenever we move the player We set them up at the beginning of each round of tests (the beginning of an Update). This requires no maintenance, but does require calculations and variable declaration every update. The option you choose is up to you.

The Strategy The size and location of each sub rectangle require thought as well as trial and error. In the image below you can see that the head and feet boxes are not the entire width, this is to allow for angled falls and jumps that seem more realistic as oppose to having a toe stop a fall. You can play with the numbers to find what works for you, but the rectangles must be relative to the (x,y) of the bounding box as well as its width and height. (x,y) width height

0.2*w 0.6 * w Rectangle Setup 0.25 * h For my example, the head is 60% of the image width and 25% of its height. This implies its (x,y) is (img.x + (0.2 * img.width), img.y). Its width is 0.6 * img.width, height is 0.25 * img.height Feet were similar with a width of 70% and height of 25%. This implies the left and right rectangles have both a width and height of 50% of the image dimensions Left (x,y): (img.x, img.y + (0.25 * img.height)) Right (x,y): (img.x + (0.5 * img.width), img.y + (0.25 * img.height)) Left and Right Width is 0.5 * img.width, height is 0.5 * img.height Feet (x,y): (img.x + (0.15 * img.width), img.y + (0.75 * img.height)) Feet Width is 0.7 * img.width, height is 0.25 * img.height Now, all of these calculations are either done once when the image is loaded, followed by updates every frame OR, they are done at the beginning of each player collision detection process 0.25 * h 0.15*w 0.7 * w

The Process The detection process is the same as we have previously discussed. Here is a rough logic outline: set collision to false // assume there will be no collision For each collidable platform in the game if the current platform collides with the player’s bounding box if the current platform collides with feet adjust player y value to platform.y – player.height (sets them perfectly on top) zero any vertical velocity set collision to true else if the current platform collides with head adjust player y value to platform.y + platform.height (sets player perfectly below platform) multiply vertical velocity by -1 to reverse direction else if the current platform collides with left adjust player x value to platform.x + player.width (sets player perfectly left of platform) multiply horizontal velocity by -1 to reverse direction else if the current platform collides with right adjust player x value to platform.x + platform.width (sets player perfectly right of platform) multiply horizonal velocity by -1 to reverse direction end if End for return collision