1. Collision Detection
Platforms

2. 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.

3. 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

4. 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)

5. 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.

6. 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

7. 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

8. 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