Emanuele Feronato

Talking about HTML5, Javascript, Phaser and TypeScript.

Continuous collision detection is very important in all your games which require precise collisions between fast moving objects, and it’s one of the most difficult and resource consuming tasks when dealing with physics.

I already showed you how to build a collision detection method using AABB and Minkowsky sum but this only works with boxes.

Now it’s time to see how to predict collisions between a moving circle and a non axis aligned line, and most of all it’s time to see how to predict is in an easy way.

First of all, play with the simulation:

You can drag all interactive spots to change circle position, radius, velocity, as well as line direction.

In the default example, which is the most interesting one because the circle would pass the line, we proceed this way:

1 – We find the intersection point between the velocity line (displayed in blue) and the obstacle line (displayed in orange).

2 – We find the shortest distance from the moving circle center (displayed in yellow) and the obstacle line (displayed in orange). Such distance is displayed in green.

3 – We find the ratio between circle radius and the above distance.

4 – Finally we ideally place the circle center on the intersection point explained at step 1 and then move it towards yellow circle center by a certain amount. Which amount? Zero pixels if the ratio at step 3 is zero, whole distance between circle and the point found at step 1 if the ratio at step 3 is one, and anywhere in between according to the value we got at step 3.

The example comes with texts to better let you understand how things work, so drag the hot spots and play with example, with values updating in real time.

There is no source code at the moment, because it was made just to prompt texts on the screen and help you to understand how this method works, but once I’ll add the rebound effect, I will wrap everything in a TypeScript class and use it instead of Arcade Physics in my Block it example.