Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

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?


Link to comment
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. 

Link to comment
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.

Link to comment
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?

Link to comment
Share on other sites

  • 1 month later...

I think you can use the body.setSize(width, height, offsetX, offetsetY) method to scale the hitbox and make it smaller.

Let's say you have a sprite called player and you want to reduce his hitbox size by 2, you would have something like this:

player.body.setSize(player.body.width/2, player.body.height/2, (player.body.width/2)/2, (player.body.height/2)/2);

The 2 firsts parameters are for the height and width, the two lasts are for the starter point of the hitbox.

If you want to see the hitbox in the game you can use


for a sprite called player or

walls.forEach(game.debug.body, game.debug);

for a group of sprite (like your walls)

Hope it can help you

Link to comment
Share on other sites

Hey Tom,

Yeah you can definitely do that. I already use setSize on the character sprite so it collides with the bottom 16x16 portion of the player (The full sprite is 16x24).

The issue though is if you reduce the player body size to be any less than the tile size there will be space in between tiles for the player to move. This might be fine for some people but it doesn't feel right (I've experimented with it). It's hard to describe but it just feels sloppy/off in terms of the movement.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...