Overlap with ladder tile not working

Phaser 3
1

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

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

2

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);
     }
}
3

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

4

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);
5

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

6

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.

7

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

8

you should try setTileIndexCallback method

9

you should try setTileIndexCallback method

Thanks,

Can you give me a sample code ???