# Tilemaps and collisions

**URL:** <https://phaser.discourse.group/t/tilemaps-and-collisions/11836>\
**Category:** Phaser 3\
**Created:** [June 8, 2022, 12:49am UTC](https://phaser.discourse.group/t/tilemaps-and-collisions/11836 "2022-06-08T00:49:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Resahp](https://avatars.discourse-cdn.com/v4/letter/r/a9adbd/32.png) [@Resahp](https://phaser.discourse.group/u/Resahp)\
**Post date:** [June 8, 2022, 12:49am UTC](https://phaser.discourse.group/t/tilemaps-and-collisions/11836/1 "2022-06-08T00:49:46Z")

</div>

Hi, I am just starting out with tilemaps and had some questions.

Where I am, at the moment:

- I have a tilemap and a character png.
- I added the tilemap with two layers, background and ground.
- The ground layer has collisions set using indexes.
- I have added collision debug graphics to the tile layer

The player collides just fine and falls off if I go too far **but my 2 problems** are:

1. I can slide my player back on the ledge
2. If I slide back in too late I notice my player actually isn’t colliding with the side of the wall.

Check the gif below:  
_(The yellow platform shows the debug collidingTileColor)_  
 ![trailing-collisions](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9e2bd223c56841730f60530424c79c6666870bc5.gif)

```javascript
export default class MainScene extends Phaser.Scene {
  private readonly movementSpeed = 4;

  private cursors: Phaser.Types.Input.Keyboard.CursorKeys;

  private player: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody;
  private ground: Phaser.Tilemaps.TilemapLayer;

  constructor() {
    super({ key: 'MainScene' });
  }

  create() {
    const map = this.make.tilemap({ key: 'map' });
    const tileset = map.addTilesetImage('level1', 'demo-tiles');
    
    map.createLayer('background', tileset, 0, 0);

    this.ground = map.createLayer('ground', tileset, 0, 0);
    this.player = this.physics.add.sprite(120, 70, 'player');

    this.ground.setCollision([9, 10, 10, 10, 11, 11, 11, 12]);

    this.physics.add.collider(this.ground, this.player, () => {});

    this.cursors = this.input.keyboard.createCursorKeys();

    this.cameras.main.startFollow(this.player);
    this.cameras.main.setZoom(1.2);

    this.addDebugConfig();
  }

  update() {
    if (this.cursors.left.isDown) {
      this.player.setX(this.player.x - this.movementSpeed);
    } else if (this.cursors.right.isDown) {
      this.player.setX(this.player.x + this.movementSpeed);
    }
  }

  addDebugConfig(): void {
    const debugGraphics = this.add.graphics().setAlpha(0.7);
    this.ground.renderDebug(debugGraphics, {
      tileColor: null,
      collidingTileColor: new Phaser.Display.Color(243, 234, 48, 255),
    });
  }
}

```

---

<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:** [June 8, 2022, 1:30am UTC](https://phaser.discourse.group/t/tilemaps-and-collisions/11836/2 "2022-06-08T01:30:37Z")

</div>

Generally you should use velocity to move sprites for proper separation.

---

<div class="post-metadata">

**Author:** ![Resahp](https://avatars.discourse-cdn.com/v4/letter/r/a9adbd/32.png) [@Resahp](https://phaser.discourse.group/u/Resahp)\
**Post date:** [June 8, 2022, 9:56pm UTC](https://phaser.discourse.group/t/tilemaps-and-collisions/11836/3 "2022-06-08T21:56:07Z")

</div>

Thank you. That fixed both of my problems! Code below. 👍

```javascript
 update() {
    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-170);
    } else if (this.cursors.right.isDown) {
      this.player.setVelocityX(170);
    } else {
      this.player.setVelocityX(0);
    }
  }

```