How to do topdown collisions properly?

Question

I'm trying to achieve grid/tile based collisions like "a link to the past"; here is an article showing it off (sliding off the corners and such). I'm currently using this type of collision test. It's based on deepnight's implementation of tile collisions but modified a bit, you have your positionX/Y in the world, TileX/Y is the tile equivalent (my tiles are 16/16), and XRatio/YRatio which is how much into a tile are you so whenever you're moving into a tile you can clip into it for a certain amount which is nice for making it seem like the player is above stuff and to have more control over it but I'm really looking for someone to show me how I'd go about implementing this kind of collision testing properly I've been having so many problems (Getting stuck in 1 pixel in the corners, Snapping on one side while the other u don't, getting stuck in general/not being able to move when holding diagonals etc) If you could "Explain Like I'm 5" that'd be awesome I'd really like to learn this stuff properly.

TL:DR - Trying to achieve Topdown collision detection like a link to the past/stardew (Slide off corners of tiles) and being bug free (Not getting stuck / snapping)

Answer 1

I'm assuming you're doing this:

var oldPos = position
position += velocity
if(collision):
    position = oldPos

the following method will fix the issues you're talking about

var oldX = position.x
position.x += velocity.x
if(collision):
    position.x = oldX

var oldY = position.y
position.y += velocity.y
if(collision):
    position.y = oldY