# Overlap with ladder tile not working

**URL:** <https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934>\
**Category:** Phaser 3\
**Created:** [June 28, 2019, 11:43am UTC](https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934 "2019-06-28T11:43:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![stanleyseow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stanleyseow/32/1190_2.png) [@stanleyseow](https://phaser.discourse.group/u/stanleyseow)\
**Post date:** [June 28, 2019, 11:43am UTC](https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934/1 "2019-06-28T11:43:15Z")

</div>

Hi,

I would like to detect overlap with ladderLayer Group but it is not working…

Can someone give me some pointer on how to overlap a group with player ??

```
   var ladderTiles = map.addTilesetImage('ladder64x64','ladder');
    ladderLayer = map.createStaticLayer('ladderLayer', ladderTiles, 0, 0);

    // This one not working
    var ladderGroup = this.physics.add.group(ladderLayer);
    
    // If overlapped with ladder, call the function
    this.physics.add.overlap(player, ladderGroup, function (player) {
        console.log('ladder overlap',player.x,player.y);               
    });

```

Complete codes at  
[https://pastebin.com/Fjm41Bb6](https://pastebin.com/Fjm41Bb6)

Complete program at  
[https://stanleyseow.github.io/js/phaser/Tiled-9-climb-ladder/](https://stanleyseow.github.io/js/phaser/Tiled-9-climb-ladder/)

---

<div class="post-metadata">

**Author:** ![Benstrocity](https://avatars.discourse-cdn.com/v4/letter/b/a4c791/32.png) [@Benstrocity](https://phaser.discourse.group/u/Benstrocity)\
**Post date:** [June 28, 2019, 12:30pm UTC](https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934/2 "2019-06-28T12:30:10Z")

</div>

I believe since this is a group you need to iterate through the children in that group.

Try this:

```
ladderGroup.children.each(function(ladder) {
     this.physics.add.overlap(player, ladder, function(player) {
          console.log('ladder overlap', player.x, player.y);
     }
}
```

---

<div class="post-metadata">

**Author:** ![stanleyseow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stanleyseow/32/1190_2.png) [@stanleyseow](https://phaser.discourse.group/u/stanleyseow)\
**Post date:** [June 28, 2019, 1:03pm UTC](https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934/3 "2019-06-28T13:03:57Z")

</div>

Thanks…  
I follow your suggested code to iterate all the members of the ladderGoup but got this error instead…

`Uncaught TypeError: Cannot read property 'add' of undefined`

---

<div class="post-metadata">

**Author:** ![Benstrocity](https://avatars.discourse-cdn.com/v4/letter/b/a4c791/32.png) [@Benstrocity](https://phaser.discourse.group/u/Benstrocity)\
**Post date:** [June 28, 2019, 1:20pm UTC](https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934/4 "2019-06-28T13:20:25Z")

</div>

Ah that’s my fault. You need to specify `this` at the end of your loop. I also left out a parenthesis in the overlap method.

```
ladderGroup.children.each(function(ladder) {
     this.physics.add.overlap(player, ladder, function(player) {
          console.log('ladder overlap', player.x, player.y);
     });
}, this);
```

---

<div class="post-metadata">

**Author:** ![stanleyseow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stanleyseow/32/1190_2.png) [@stanleyseow](https://phaser.discourse.group/u/stanleyseow)\
**Post date:** [June 28, 2019, 2:13pm UTC](https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934/5 "2019-06-28T14:13:39Z")

</div>

Thanks…

I think the overlap is working as I can remove the ladder tile as a test…  
`ladderLayer.removeTileAt(tile.x, tile.y);`

What I wanted was to set **ladder = true** and in the cursor, **player.setGavityY(0)** so I can climb the ladder up / down

```
 if (cursors.left.isDown) {
    if ( ladder == true) {
        console.log("Gravity Zero Left");
        player.setGavityY(0)
    }

```

I got the ladder idea from this code but it is for phaser2 …  
[https://codepen.io/arhinostorm/pen/QdjQvy?editors=0010](https://codepen.io/arhinostorm/pen/QdjQvy?editors=0010)

---

<div class="post-metadata">

**Author:** ![Benstrocity](https://avatars.discourse-cdn.com/v4/letter/b/a4c791/32.png) [@Benstrocity](https://phaser.discourse.group/u/Benstrocity)\
**Post date:** [June 28, 2019, 2:55pm UTC](https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934/6 "2019-06-28T14:55:27Z")

</div>

So in your overlap function you are just setting `ladder = true`. Do you have `ladder = false` declared anywhere else in your code? What problem are you still having now.

---

<div class="post-metadata">

**Author:** ![stanleyseow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stanleyseow/32/1190_2.png) [@stanleyseow](https://phaser.discourse.group/u/stanleyseow)\
**Post date:** [June 28, 2019, 4:20pm UTC](https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934/7 "2019-06-28T16:20:53Z")

</div>

I’m not sure how the overlap works bcos it still trigger overlap, ( from the console.log) when the player is moving, when I am no where near any of the ladder tiles …

I read the API, the first callback is collision and the 2nd callback is overlap …

`this.physics.add.overlap(player, ladderLayer, onLadder1, onLadder2, this );`

```
function onLadder1(sprite,tile) {
ladder = true;
//ladderLayer.removeTileAt(tile.x, tile.y);
console.log('On ladder1 ', tile.x, tile.y);
//return false;
}

function onLadder2(sprite,tile) {
    ladder = true;
    //ladderLayer.removeTileAt(tile.x, tile.y);
    console.log('On ladder2 ', tile.x, tile.y);
    //return true;
}

```

**Console.log output :**  
game.js:150 On ladder2 4 2  
game.js:150 On ladder2 3 3  
game.js:150 On ladder2 4 3  
game.js:150 On ladder2 3 2  
game.js:150 On ladder2 4 2  
game.js:150 On ladder2 3 3

---

<div class="post-metadata">

**Author:** ![sgtmadcap](https://avatars.discourse-cdn.com/v4/letter/s/9d8465/32.png) [@sgtmadcap](https://phaser.discourse.group/u/sgtmadcap)\
**Post date:** [July 5, 2019, 5:45pm UTC](https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934/8 "2019-07-05T17:45:33Z")

</div>

you should try setTileIndexCallback method

---

<div class="post-metadata">

**Author:** ![stanleyseow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/stanleyseow/32/1190_2.png) [@stanleyseow](https://phaser.discourse.group/u/stanleyseow)\
**Post date:** [July 31, 2019, 4:18pm UTC](https://phaser.discourse.group/t/overlap-with-ladder-tile-not-working/2934/9 "2019-07-31T16:18:03Z")

</div>

> you should try setTileIndexCallback method

Thanks,

Can you give me a sample code ???