Edit: Problem solved!

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.

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:

http://i.stack.imgur.com/aiZjI.png

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:

http://i.stack.imgur.com/XBEKR.png

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.