Detect overlap with bottom of sprite

Phaser 3
1

Hi! I’m making a top-down game. I want to detect an overlap when the player stands on a specific tile. I have no problem setting up the physics bodies and the overlap. However, the overlap is firing whenever any part of the player’s body overlaps with the tile. For example, here:

Untitled

If the player dimensions were 32 x 32 px (same as the tile) I could just make the hitbox of the purple tile’s body 16px high and I think it would work. However, the player’s sprite is 41px high so that won’t work.

Is there any way to know which part of the player’s body is overlapping? (e.g. something like body.touching.down but for body.embedded)

2

You can test the tile and body position in the overlap process callback.

But if you do this a lot you may want to resize the player body (onto the sprite’s feet) or add a second physics body for it instead.

3

Thanks for the reply. Resizing the player’s body won’t work, because I also have colliders in the scene (and those I do want to fire with the entire player’s sprite).

Your last suggestion sounds reasonable. But, how do I add a second physics body to a sprite?

I’ve tried:

player = this.physics.add.sprite(spawnPoint.x, spawnPoint.y, "atlas", "front");
playerFeet = this.physics.add.existing(player, false);

But in this case the second body replaces the first.
And:

player = this.physics.add.sprite(spawnPoint.x, spawnPoint.y, "atlas", "front");
playerFeet = new Phaser.Physics.Arcade.Body(this.physics.world, player);
// I also tried adding the following line:
this.physics.world.enableBody(playerFeet);

Here nothing happens, the second body does not seem to interact with the world.

4

You need a second game object (zone) as Arcade Bodies are only one-to-one.

let player, playerFeet;

function create() {
  // You will need to choose the exact dimensions and offset
  playerFeet = this.physics.add.existing(
    this.add.zone(player.x, player.y + 8, w, h)
  );
  playerFeet.body.moves = false;
}

function update() {
  playerFeet.body.x = player.body.x;
  playerFeet.body.y = player.body.y + 8;
}
5

Thanks! For future reference, I ended up solving it using your very first suggestion, checking the tile and body positions in the overlap. Since I had many tiles that had to be activated this way, in order to not repeat the position check in each overlap callback, I moved them all into a separate custom class extending Image. This kept the code DRY.