# Detect overlap with bottom of sprite

**URL:** <https://phaser.discourse.group/t/detect-overlap-with-bottom-of-sprite/10932>\
**Category:** Phaser 3\
**Created:** [December 30, 2021, 4:57pm UTC](https://phaser.discourse.group/t/detect-overlap-with-bottom-of-sprite/10932 "2021-12-30T16:57:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ariroffe](https://avatars.discourse-cdn.com/v4/letter/a/dbc845/32.png) [@ariroffe](https://phaser.discourse.group/u/ariroffe)\
**Post date:** [December 30, 2021, 4:57pm UTC](https://phaser.discourse.group/t/detect-overlap-with-bottom-of-sprite/10932/1 "2021-12-30T16:57:47Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/ec116d358b6a1502b319467a59b8f7366ea84dcb.png)

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`)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 1, 2022, 9:52pm UTC](https://phaser.discourse.group/t/detect-overlap-with-bottom-of-sprite/10932/2 "2022-01-01T21:52:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ariroffe](https://avatars.discourse-cdn.com/v4/letter/a/dbc845/32.png) [@ariroffe](https://phaser.discourse.group/u/ariroffe)\
**Post date:** [January 3, 2022, 2:33pm UTC](https://phaser.discourse.group/t/detect-overlap-with-bottom-of-sprite/10932/3 "2022-01-03T14:33:54Z")

</div>

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:

```javascript
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:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 3, 2022, 4:57pm UTC](https://phaser.discourse.group/t/detect-overlap-with-bottom-of-sprite/10932/4 "2022-01-03T16:57:25Z")

</div>

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

```javascript
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;
}

```

---

<div class="post-metadata">

**Author:** ![ariroffe](https://avatars.discourse-cdn.com/v4/letter/a/dbc845/32.png) [@ariroffe](https://phaser.discourse.group/u/ariroffe)\
**Post date:** [January 3, 2022, 7:38pm UTC](https://phaser.discourse.group/t/detect-overlap-with-bottom-of-sprite/10932/5 "2022-01-03T19:38:47Z")

</div>

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.