As mentioned in my previous post, I’ve been investigating and trying to fix an issue with janky collision handling with the physics engine that I’m using (Chipmunk2D). When hitting the ground you could often end up bouncing off in a weird direction, or lose your previously built up momentum.

Let me illustrate this issue with a simple example:

The expected outcome is of course that the player should bounce off the slope to the right, but what happens is that you bounce right up again.

It’s easier to see why this happens if we turn on the wireframe of the collision layer:

As you see, the player hits the ground right at the seam of two connected shapes. The reason these seams exist in the first place is because the physics engine only allows us to use convex polygons, and not concave ones. In simple terms, a polygon is concave if it’s possible to draw a straight line through it that crosses its edges more than twice. Conversely, if no such line exists, the polygon must be convex.

This limitation is common to most physics engines because they use collision detection algorithms that are optimized specifically for convex polygons, like the Gilbert–Johnson–Keerthi distance algorithm or the Separating Axis Theorem. What you have to do to create concave shapes is to use polygon decomposition, which means that you to split them up into multiple convex polygons. That’s what causes all the seams in the level terrain shown above.

The Workaround

So how do we deal with this issue? Well, one approach would be to just switch to another physics engine and see if that handles this better. In my case however, I’m pretty much stuck with Chipmunk2D because of the C++ bindings that it comes with for Cocos2D JS, which is the framework that I’m building the game with. If I were to use another pure JavaScript based physics engine, it would unfortunately run much less smoothly on mobile devices.

Being stuck with this physics engine, I came up with another way to represent the terrain of the level. Instead of using polygons, I just trace the edges of the shape with line segments. These segments are not collidable themselves, but just act as sensors to tell when the player is about to come in contact with the ground.

At the start of each frame, when the player’s position is yet to be updated, I determine if we are going to collide with the ground. We can do that by querying the physics engine if there are any line segments between the player’s current position and the next. If there is a collision imminent, I create a temporary box along the slope of the line segment that the player will then collide with. Here’s how that looks:

And that’s all there is to it! The ground only phases into existence when it is needed, and strictly in the form of convex polygons (rectangles in this case), which means there’s no need to worry about polygon decomposition and the seams that it creates.

This works pretty well and I’m glad I found a workaround that was fairly simple to implement. I have however created an issue in the Chipmunk2D repository to see if this is something that can be fixed in the engine itself.

It’s also worth noting that this technique only works well for smooth terrain as seen above, colliding with sharp corners will cause some problems. But I can always fall back to using convex polygons for more pointy terrain.

With this issue dealt with, I’m pretty much ready to go into production on the first set of levels for the game — this is where the fun part begins! Oh and I also have to start learning about sound design, as that’s a big aspect of game development that I have yet to delve into. The next update will probably be about that, but until then, have a good one!