How do you move a sprite through areas of the exact same width as the sprite?

Recommended Posts

Let's say you have a sprite with a collision body of 16px/16px and all the areas to move in the map are exactly 16px/16px as well. It's very hard to maneuver the sprite to be at exactly in the opening to avoid collision letting the player move through it.

For example, I attached a gif I made of how Bomberman solves this problem:


Bomberman allows the player to clip slightly into the corner of the tile when they get close to the edge so the player starts moving diagonally into the open gap so then the player doesn't have to worry about lining up perfectly.

I've looked into doing that but collision detection is AABB on tiles.

I also can't just set the players x/y coordinates to be in the right spot because that will break any other collision physics going on.

So is there a way to round the corners like in Bomberman or to use velocity to position the player in the opening of the lane perfectly or any other ideas I'm not thinking of?


Share this post

Link to post
Share on other sites

I think your player movement should be grid/tile based. So you tell the player to go forward 1 tile and the player sprite will LERP towards that sprite so you are not just setting the tile x/y 

I recommend this because the game will be very frustrating because the player may be 0.001 pixel too close to an explosion and will get killed, if the player moves on a grid they are either Safe or not safe. 

Share this post

Link to post
Share on other sites

Hey jamessimo, I don't have to worry about a player dying by fractions of a pixel because when an overlap happens with a flame I determine if the player is >=50% in the flame so partial overlap is allowed.

I don't want to use grid/tile based movement because it will just make the movement feel clunky and I want the user to have freedom. If they move into the next tile by 30% and try to stop moving the game would either have to keep them moving the rest of the way or move back to the previous tile.

Ideally I would like clipping into just the corners of the tile or somehow be able to line the players up perfectly with the gap.

Share this post

Link to post
Share on other sites

Looks like the slopes plugin is specifically for tilemaps which might work but I also want to have collision on sprites which I don't think that slopes plugin can do.

It looks like it's possible to convert tiles into sprites so then I could do circle collision on them. That way my player sprite could have body.setCircle(<width of the sprite>) and then the sprite will round all tiles and whatever other objects are in the game.

The issue with this though is the sprite moves slowly around a corner as the rounded collision slows the sprite down. EX: I'm near the top-left of a tile and I hold right which applies an X velocity of say 60. As the user moves around the corner of the tile they also move in the Y direction to get around the corner meaning the velocity is split between the X and Y. This makes sense but the combined split X/Y velocity appears to still be less than the original applied velocity of X:60.

Anyone know if there is a way to prevent any slowdown when colliding with a circle body as described above?

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.