# Help with Tiled layer collision

**URL:** <https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423>\
**Category:** Phaser 3\
**Created:** [March 19, 2022, 3:03pm UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423 "2022-03-19T15:03:42Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yun](https://avatars.discourse-cdn.com/v4/letter/y/bcef8e/32.png) [@Yun](https://phaser.discourse.group/u/Yun)\
**Post date:** [March 19, 2022, 3:03pm UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423/1 "2022-03-19T15:03:42Z")

</div>

Hi,

I’m using Tiled map to do a little platformer and I have issues about a collectable item (here coin).

The best I got was the item delete itself with the player colliding, but in fact the function is called at each new tile discovered of the layer.

```javascript
var config = {
    type: Phaser.AUTO,
    width: 1200,
    height: 700,
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    physics : {
        default : "arcade",
        arcade : {
            debug: true,
            gravity: { y: 1000 },
        }
    }
};

var game = new Phaser.Game(config);
var coinLayer;
var coinsCollected = 0;
var cooldown = 0;

function preload (){
    this.load.tilemapTiledJSON('map',"../JSON/big_head/test28274.json");

    this.load.image("tiles","../img/big_head/morning.png");
    //this.load.image("coin","../img/big_head/coin.png");
    this.load.atlas('player', '../img/big_head/player.png', '../JSON/big_head/player.json');

    //this.load.image('spike', '../img/big_head/spike.png');
    this.load.spritesheet('coin', '../img/big_head/coin.png', { frameWidth: 32, frameHeight: 32 });

}

function create (){
    
    this.cursors = this.input.keyboard.createCursorKeys();

    / ******************************** /
    /* */
    /* -- Création de la carte -- */
    /* */
    / ******************************** /
    
    const map = this.make.tilemap({ key: "map", tileWidth: 1400, tileHeight: 40});
    const tileset = map.addTilesetImage("morning_adventures_tileset_16x16","tiles");

    / ************************************ /
    /* */
    /* -- Création des plateformes -- */
    /* */
    / ************************************ /

    const platforms = map.createLayer('back', tileset, 0, 0);
    //platforms.setCollisionByExclusion(-1, true);
    platforms.setCollisionBetween(1, 60);

    / ************************************* /
    /* */
    /* -- Création des récupérables -- */
    /* */
    / ************************************* /

    var coinTiles = map.addTilesetImage('coin', 'coin');
    coinLayer = map.createLayer('items', coinTiles, 0, 0);

    / ******************************** /
    /* */
    /* -- Création du perso -- */
    /* */
    / ******************************** / 

    this.player = this.physics.add.sprite(0, 0, 'player').setCollideWorldBounds(true);
    this.player.setScale(0.5);
    this.physics.add.collider(this.player, platforms);

    // PB TILEMAP
    coinLayer.setTileIndexCallback(61, hitCoin, this.player);
    //this.physics.add.overlap(this.player, coinLayer, hitCoin);

    / ******************************** /
    /* */
    /* -- Gestion de la caméra -- */
    /* */
    / ******************************** /

    this.cameras.main.setBounds(0, 0, 15400, 4000);
    this.physics.world.setBounds(0, 0, 15400, 4000);

    this.cameras.main.setZoom(1);

    this.cameras.main.startFollow(this.player, true, 0.08, 0.08);

    / ******************************** /
    /* */
    /* -- Création du texte -- */
    /* */
    / ******************************** /

    text = this.add.text(1, 1, '', {
        fontSize: '20px',
        fill: '#ffffff'
    });
    text.setScrollFactor(0);
    updateText();
   
    / ******************************** /
    /* */
    /* -- Player animations -- */
    /* */
    / ******************************** /

    this.anims.create({
        key: 'walk',
        frames: this.anims.generateFrameNames('player', { prefix: 'p1_walk', start: 1, end: 11, zeroPad: 2}),
        frameRate: 10,
    });
}

function update (time, delta)
{
    this.player.setVelocityX(0);

    if (this.cursors.left.isDown)
    {
        this.player.setVelocityX(-500);
        this.player.flipX = true;
        this.player.anims.play('walk', true); // play walk animation

    }
    else if (this.cursors.right.isDown)
    {
        this.player.setVelocityX(500);
        this.player.flipX = false;
        this.player.anims.play('walk', true); // play walk animation
    }

    if ((this.cursors.up.isDown || this.cursors.space.isDown) && this.player.body.onFloor() || (this.player.body.onWall() && (this.cursors.up.isDown || this.cursors.space.isDown)))
    {    
        if(cooldown == 0 || time - cooldown >= 600){
            this.player.setVelocityY(-640);
                cooldown = time;
        }
    }

    if (this.cursors.left.isDown && this.player.x > 0)
    {
        //this.player.setAngle(-90);
        this.player.x -= 2.5;
    }
    else if (this.cursors.right.isDown && this.player.x < 3392)
    {
        //this.player.setAngle(90);
        this.player.x += 2.5;
    }
}

function hitCoin (sprite, tile)
{
    coinLayer.removeTileAt(tile.x, tile.y);
    coinsCollected += 1;

    updateText();

    console.log("coucou")

    return true;
}

function updateText ()
{
    text.setText(
        '\nCoins collected: ' + coinsCollected
    );
}

```

Does somebody knows how to do ?

Thanks !

---

<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:** [March 19, 2022, 3:05pm UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423/2 "2022-03-19T15:05:09Z")

</div>

👋

~~Use `this.physics.add.collider(this.player, coinLayer, hitCoin);`~~

---

<div class="post-metadata">

**Author:** ![Yun](https://avatars.discourse-cdn.com/v4/letter/y/bcef8e/32.png) [@Yun](https://phaser.discourse.group/u/Yun)\
**Post date:** [March 20, 2022, 10:43am UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423/3 "2022-03-20T10:43:27Z")

</div>

Hi !  
I’ve been trying it, but it triggers the function each time a player “collides” with a new tile of coinLayer.  
Like, if I run straight and there are 9 tiles of the layer (even if 0 coins), hitcoin function is printing 9.

---

<div class="post-metadata">

**Author:** ![Yun](https://avatars.discourse-cdn.com/v4/letter/y/bcef8e/32.png) [@Yun](https://phaser.discourse.group/u/Yun)\
**Post date:** [March 20, 2022, 10:46am UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423/4 "2022-03-20T10:46:01Z")

</div>

And with this line it does nothing.  
Hitcoin is never called (via console.log)

---

<div class="post-metadata">

**Author:** ![Jjake](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@Jjake](https://phaser.discourse.group/u/Jjake)\
**Post date:** [March 20, 2022, 2:41pm UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423/5 "2022-03-20T14:41:02Z")

</div>

You can try to loop tilemap or filter tilemap and add collision callback only for coin tiles.

#### collisionCallback()

> **[Tilemaps](https://docs.phaser.io/api-documentation/typedef/tilemaps)**
>
> Phaser.Tilemaps

---

<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:** [March 20, 2022, 3:30pm UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423/6 "2022-03-20T15:30:08Z")

</div>

Sorry, my mistake, it should be

```nohighlight
// PB TILEMAP
coinLayer.setTileIndexCallback(61, hitCoin);
this.physics.add.overlap(this.player, coinLayer);

```

---

<div class="post-metadata">

**Author:** ![Yun](https://avatars.discourse-cdn.com/v4/letter/y/bcef8e/32.png) [@Yun](https://phaser.discourse.group/u/Yun)\
**Post date:** [March 20, 2022, 4:02pm UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423/7 "2022-03-20T16:02:52Z")

</div>

I’ve only found example of use in Phaser 2 😕

---

<div class="post-metadata">

**Author:** ![Yun](https://avatars.discourse-cdn.com/v4/letter/y/bcef8e/32.png) [@Yun](https://phaser.discourse.group/u/Yun)\
**Post date:** [March 20, 2022, 4:04pm UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423/8 "2022-03-20T16:04:48Z")

</div>

It still doesn’t work. Function Hitcoin is not triggered and I don’t know why.  
I’ve done exactly what you said, I don’t understand why it doesn’t work.

```javascript
var config = {
    type: Phaser.AUTO,
    width: 1200,
    height: 700,
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    physics : {
        default : "arcade",
        arcade : {
            debug: true,
            gravity: { y: 1000 },
        }
    }
};

var game = new Phaser.Game(config);
var coinLayer;
var coinsCollected = 0;
var cooldown = 0;

function preload (){
    this.load.tilemapTiledJSON('map',"../JSON/big_head/mapDef.json");

    this.load.image("tiles","../img/big_head/morning.png");
    //this.load.image("coin","../img/big_head/coin.png");
    this.load.atlas('player', '../img/big_head/player.png', '../JSON/big_head/player.json');

    //this.load.image('spike', '../img/big_head/spike.png');
    this.load.spritesheet('coin', '../img/big_head/coin.png', { frameWidth: 32, frameHeight: 32 });

}

function create (){
    
    this.cursors = this.input.keyboard.createCursorKeys();

    / ******************************** /
    /* */
    /* -- Création de la carte -- */
    /* */
    / ******************************** /
    
    const map = this.make.tilemap({ key: "map", tileWidth: 1400, tileHeight: 40});
    const tileset = map.addTilesetImage("morning_adventures_tileset_16x16","tiles");

    / ************************************ /
    /* */
    /* -- Création des plateformes -- */
    /* */
    / ************************************ /

    const platforms = map.createLayer('back', tileset, 0, 0);
    //platforms.setCollisionByExclusion(-1, true);

    / ************************************* /
    /* */
    /* -- Création des récupérables -- */
    /* */
    / ************************************* /

    var coinTiles = map.addTilesetImage('coin');
    coinLayer = map.createLayer('items', coinTiles, 0, 0);

    platforms.setCollisionBetween(1, 60);

    / ******************************** /
    /* */
    /* -- Création du perso -- */
    /* */
    / ******************************** / 

    this.player = this.physics.add.sprite(0, 0, 'player').setCollideWorldBounds(true);
    this.player.setScale(0.35);
    this.physics.add.collider(this.player, platforms);

    coinLayer.setTileIndexCallback(61, hitCoin);
    this.physics.add.overlap(this.player, coinLayer);

    / ******************************** /
    /* */
    /* -- Gestion de la caméra -- */
    /* */
    / ******************************** /

    this.cameras.main.setBounds(0, 0, 15400, 480);
    this.physics.world.setBounds(0, 0, 15400, 480);

    this.cameras.main.setZoom(1.6);

    this.cameras.main.startFollow(this.player, true, 0.08, 0.08);

    / ******************************** /
    /* */
    /* -- Création du texte -- */
    /* */
    / ******************************** /

    text = this.add.text(1, 1, '', {
        fontSize: '20px',
        fill: '#ffffff'
    });
    text.setScrollFactor(0);
    updateText();
   
    / ******************************** /
    /* */
    /* -- Player animations -- */
    /* */
    / ******************************** /

    this.anims.create({
        key: 'walk',
        frames: this.anims.generateFrameNames('player', { prefix: 'p1_walk', start: 1, end: 11, zeroPad: 2}),
        frameRate: 10,
    });
}

function update (time, delta)
{
    this.player.setVelocityX(0);

    if (this.cursors.left.isDown)
    {
        this.player.setVelocityX(-200);
        this.player.flipX = true;
        this.player.anims.play('walk', true);

    }
    else if (this.cursors.right.isDown)
    {
        this.player.setVelocityX(200);
        this.player.flipX = false;
        this.player.anims.play('walk', true);
    }

    if ((this.cursors.up.isDown || this.cursors.space.isDown) && this.player.body.onFloor() || (this.player.body.onWall() && (this.cursors.up.isDown || this.cursors.space.isDown)))
    {    
        if(cooldown == 0 || time - cooldown >= 600){
            this.player.setVelocityY(-340);
                cooldown = time;
        }
    }

    if (this.cursors.left.isDown && this.player.x > 0)
    {
        //this.player.setAngle(-90);
        this.player.x -= 2.5;
    }
    else if (this.cursors.right.isDown && this.player.x < 3392)
    {
        //this.player.setAngle(90);
        this.player.x += 2.5;
    }
}

function hitCoin (sprite, tile)
{
    coinLayer.removeTileAt(tile.x, tile.y);
    coinsCollected += 1;

    updateText();

    console.log("coucou")

    return true;
}

function updateText ()
{
    text.setText(
        '\nCoins collected: ' + coinsCollected
    );
}

```

Thanks a lot for your help

---

<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:** [March 20, 2022, 4:34pm UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423/9 "2022-03-20T16:34:56Z")

</div>

Are you sure index 61 is correct?

---

<div class="post-metadata">

**Author:** ![Yun](https://avatars.discourse-cdn.com/v4/letter/y/bcef8e/32.png) [@Yun](https://phaser.discourse.group/u/Yun)\
**Post date:** [March 20, 2022, 5:24pm UTC](https://phaser.discourse.group/t/help-with-tiled-layer-collision/11423/10 "2022-03-20T17:24:19Z")

</div>

Yes I checked.  
Here is my tiledmap code (the beginning) :

```javascript
 <tileset firstgid="61" name="coin" tilewidth="16" tileheight="16" tilecount="16" columns="4">
  <image source="../Téléchargements/2/coin.png" width="64" height="64"/>
 </tileset>

```

Isn’t it “first gid” ?