Solved, see bottom of post for final algorithm
Background: I am working on a 2D platformer using JS and an HTML canvas element. The level map is tile based, but the player is not tied to the tiles. I use the collision detection algorithm described in "Tiny Platformer" in Code inComplete . It basically works, with the exception of one case of the hem (or “protrusions”).
Problem:
The player falls, and also moves to the right, into the wall. When he falls, he teleports to the height of the ledge. Instead, the player should normally fall without teleporting.
Is there a way to change the algorithm to prevent this behavior? If not, can you suggest an alternative collision detection algorithm? Ideally, any correction does not imply that the player always crashes, because in the game the player’s fall direction switches between up / down / left / right.
Algorithm:
The player’s new position is calculated in the absence of collisions. (Not shown in the code below)
A function called getBorderTiles takes an object (player) and returns tiles by touching each of the 4 players. Since the player is nothing more than a tile, these boundary tiles are necessarily the only tiles that the player touches. Please note that some of these fragments may be the same. For example, if a player occupies only one column, the tiles with the upper left / upper right layer will be the same as the lower left / right lower tiles. If this happens, getBorderTiles will still return all four fragments, but some of them will be the same.
He checks these boundary tiles on a level map (2D array) to make sure they are solid. If the tile is solid, the object collides with this tile.
It checks for a collision up / down / left / right. If the player moves down and collides with the bottom plate, but does not collide with the corresponding plate up, the player collides. If a player moves to the left and collides with the left tile, but does not collide with the corresponding right tile, he is faced to the left. Etc. Up / down checks are performed before a left / right check. Variables that store boundary tiles are adjusted if an up / down collision is performed before performing a left / right check. For example, if a player collides, he will be pressed into the upper tiles, so BL / BR tiles will now be the same as TL / TR.
Player x, y and speed are adjusted depending on the directions he is facing.
Why the algorithm fails:
The lower right tile is solid, but the upper right is not, therefore (step 4) the player collides and (step 5) he pushes up. In addition, it collides with the BR plate, but not with the BL, so it collides to the right and moves to the left. Towards the end, the player is displayed just above and to the left of the ledge. In fact, he teleported.
Attempted solution: I tried to fix this, but it only created another problem. I added a check so that the player only collides with the tile if it was at some distance inside this tile (say, 3px). If the player was only in the BR plate, the algorithm would not have recorded a downward collision, so the player would not teleport. However, if the player fell to the ground in another scenario, he did not recognize the collision until the player hit the ground far. The player was trembling when he fell a little into the ground, he was pushed back to the ground, fell again, etc.
Thanks for reading this far. I really appreciate your feedback.
Current algorithm code:
var borderTiles = getBorderTiles(object),
UPDATE: Solution with a solution of Maraca. The algorithm is given below. It basically tests (x, y) and resolves collisions, and then checks (y, then x) and resolves conflicts this way. Regardless of the test results in a player moving a shorter distance, this is the one that is ultimately used.
Interestingly, this requires a special case when a player collides both in the upper and left directions. Perhaps this is due to the fact that the player’s coordinate (x, y) is in the upper left corner. In this case, a test should be used that leads the player moving the LONG distance to be used. In this gif it’s clear:
The player is a black box, and the yellow box represents where the player would be if he used another test (a test that resulted in the player moving a greater distance). Ideally, the player should not move into the wall, but instead should be a yellow block. Therefore, a long distance test should be used in this scenario.
Here is a quick and dirty implementation. This is not optimized at all, but I hope it shows the algorithm quite clearly.
function handleCollision(object) { var borderTiles = getBorderTiles(object),