I'm developing my first tile-based 2D-game with Javascript. To learn the basics, I decided to write my own "game engine". I have successfully implemented collision detection using the separating axis theorem, but I've run into a problem that I can't quite wrap my head around.

If I press the [up] and [left] arrow-keys simultaneously, my character moves diagonally towards the upper left. If he hits a horizontal wall, he'll just keep moving in x-direction.

The same goes for [up] and [left] as well as downward-diagonal movements, it works as intended:

horizontal walls

Diagonal movement works fine for horizontal walls, for both left and right-movement

However: this does not work for vertical walls.

Instead of keeping movement in y-direction, he'll just stop as soon as he "enters" a new tile on the y-axis.

So for some reason SAT thinks my character is colliding vertically with tiles from vertical walls:

vertical walls

My character stops because he thinks that he is colliding vertically with tiles from the wall on the right.

This only occurs, when:

  • Moving into top-right direction towards the right wall
  • Moving into top-left direction towards the left wall

Bottom-right and bottom-left movement work: the character keeps moving in y-direction as intended.

Is this inherited from the way SAT works or is there a problem with my implementation? What can I do to solve my problem?

Oh yeah, my character is displayed as a circle but he's actually a rectangular polygon for the collision detection.

Thank you very much for your help.

  • \$\begingroup\$ I suspect you're experiencing what I've encountered and asked about: How do I prevent my platformer's character from clipping on wall tiles?. You're clipping when moving upwards because it resolves the collision with the upper tile first, and resolves it vertically, and then resolves it with the lower tile second, and resolves it horizontally. This doesn't happen in the reverse direction. I haven't marked a correct answer yet (see my comment on the question) but the answers might be useful. \$\endgroup\$ Commented Sep 3, 2012 at 12:09
  • \$\begingroup\$ This question is also related: 2D Platformer AABB collision problems. I implemented its solution, but the algorithm is flawed: collisions on multiple axes can push the player great distances in order to find a resolution. \$\endgroup\$ Commented Sep 3, 2012 at 12:12
  • \$\begingroup\$ Thank you for the links, I'll be following your topic! :) \$\endgroup\$
    – Macks
    Commented Sep 3, 2012 at 12:14
  • \$\begingroup\$ gamedev.stackexchange.com/a/30407/19528 This seems like a good way to go, I'm going to check out how I could implement this. \$\endgroup\$
    – Macks
    Commented Sep 3, 2012 at 12:28
  • \$\begingroup\$ That might well be the missing piece. :) \$\endgroup\$ Commented Sep 3, 2012 at 12:32

1 Answer 1


Big thanks to Jonathan who pointed me in the right direction. Sean describes the method I used in a different thread. Also big thanks to him! :)

Here is how I solved my problem:

If a collision is registered by my SAT-method, only fire the collision-event on my character if there are no neighbouring solid tiles in the direction of the returned minimum translation vector.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .