How to use removeTileAt()

Phaser 3
1

Hi,

I wanted to use removeTileAt() using overlap but it keeps calling this function non-stop

How do I fixed this ??

Am I using the overlap function wrongly ???

// Created Dynamic Layer
item1Layer = map.createDynamicLayer('item1Layer', Tiles, 0, 0);
item2Layer = map.createDynamicLayer('item2Layer', Tiles, 0, 0);

This is my overlap code

// When player overlap , call collectItem1, collectItem2
this.physics.add.overlap(player, item1Layer,collectItem1, null, this );
this.physics.add.overlap(player, item2Layer,collectItem2, null, this );

This function is called non-stop from the console

function collectItem1(sprite, tile) {
    console.log('Item1', tile.x, tile.y)
    item1Layer.removeTileAt(tile.x, tile.y); 
    return false;
}

Sample output
game.js:165 Item1 5 1
game.js:165 Item1 6 1
game.js:165 Item1 5 2
game.js:165 Item1 6 2
game.js:172 Item2 5 1
game.js:172 Item2 6 1
game.js:172 Item2 5 2
game.js:172 Item2 6 2
game.js:165 Item1 5 1
game.js:165 Item1 6 1
game.js:165 Item1 5 2
game.js:165 Item1 6 2
game.js:172 Item2 5 1

2

I’m not sure, but it seems you are doing this over the whole layer, like every tile of it… shouldn’t you check for overlap only on some tiles, where your items are ?

I would do :thinking:

item1Layer = map.createDynamicLayer('item1Layer', Tiles, 0, 0);
item1Layer.setTileIndexCallback(12, collectItem1, this);

Which checks only the places where the 12th tileset tile is used.
Then collectItem1() should work well, and only when you hit some of those 12th tiles…

3

Oh, and then you just have to do :

this.physics.add.overlap(player, item1Layer);

whithout any other argument.

1 Like
4

Thanks …

Where do I find this index 12 ?
I m quite confused on this setTileIndexCallback

5

Well, you may count manually the tiles on your tileset…
or you may read/explore your tilemap.json file to find this index - it’s easier if you create a layer with only the tile you want on it (then you’ll find this index in an ocean of 0)

I guess there are better ways but that’s the ones I know :hugs:

6

And yeah, I agree with you that setTileIndexCallback is quite confusing…
I found it in the Phaser exemples, it’s a strange logic but it works fine.

7

I’m not sure that setTileIndexCallback affects tile overlaps. I think overlap() with a tile layer always gives every overlapping tile (and empty ones).

You may need

function collectItem1 (sprite, tile) {
    if (tile.index !== 12) return;

    console.log('Item1', tile.x, tile.y)
    item1Layer.removeTileAt(tile.x, tile.y); 
}
1 Like
8

Well, I tested setTileIndexCallback() and it triggered overlap() callback only on the one tile I pointed.
But beside of this one kind of tile my layer was empty…

9

I found out why …

The console.log(tile.index) gave me a hint what was the tile id I overlap and it was different from the map.json file

hit item 7

Supposed to be 6 but the console.log print out id if 7 !!!

function collectItem1 (sprite, tile) {
console.log(tile.index)
    if (tile.index !== 6) return;
    console.log('Item1', tile.x, tile.y)
    item1Layer.removeTileAt(tile.x, tile.y); 
}

map.json file

"tiles":[
                {
                 "id":6,
                 "properties":[
                        {
                         "name":"item",
                         "type":"bool",
                         "value":true
                        }]
                },