Question

I’m currently working on a jump ‘n’ prototype in html5 canvas.
The language is actually not that important, I just need a hint on the algorithm.

First look at this illustration: http://i.imgur.com/3CwBI.png

As you can see I have two rectangles that collide with each other (the white one is the player, the gray one a static obstacle).

While precalculating the next frame I need to fix the players position if a collision is about to happen. The human brain can clearly tell, that the white rectangle in the image is going to land on top of the platform (considering linear motion). But how does one tell this the program ?

I’m moving the player with 2d vectors.

Edit: I can already detect the collision, I just need to know the direction, so I can fix the players position on the corresponding side of the obstacle.

Answer 1

For each corner of your player, draw a line segment between where it is now, and where it will be next frame.

for each of these line segments, and for each line segment making up the platform, check to see if the two segments intersect.

If any intersections occur, then the player will collide with the platform in the next frame.

Edit:

90% of the time, the red line segments only collide with a single line segment belonging to the platform. If the red segments collide with the platform’s left, the player struck the wall; if the segments collide with the platform’s top, the player landed on the platform.

One corner case is when a collision occurs both on the top and the side.

In that case, in order to determine which collision “really” occurs, you need to decide which one occurs first in time. the earliest intersection is the one closest to the earlier player rectangle. In the above image, if the upper right player is the earlier one, then the earliest collision is with the top of the platform.