# Collision between tilemap layer and player not working

**URL:** <https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373>\
**Category:** Phaser 2 / CE\
**Created:** [May 7, 2019, 7:52pm UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373 "2019-05-07T19:52:28Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![LapopenJesus](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@LapopenJesus](https://phaser.discourse.group/u/LapopenJesus)\
**Post date:** [May 7, 2019, 7:52pm UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/1 "2019-05-07T19:52:28Z")

</div>

Hello everyone,

first time here (so might excuse if its the wrong section) but I’m fricking desperate at the moment.

I’m trying for about 2 days now to get my player to collide with my “Obstacle” tilemap layer. I looked at almost every post about this here or elsewhere but I can’t get it to work. It might be a simple thing but I can’t find whats wrong and I want to throw my pc out of the window now. So maybe one of you guys have an idea and can help me. Any help is appreciated.

The code is the Following:

```
var game = new Phaser.Game(255, 255, Phaser.AUTO, '', { preload: preload,
create: create, 
update: update 
});

var player;
var speed = 2;
var floor;
var walls;
var obsts;
var map;

function preload() 
{
 
  game.load.spritesheet('player','assets/player_spritesheet.png', 48,48);

  game.load.image("tileset", "assets/tileset.png");
  game.load.tilemap(
    "map",
    "assets/test_map.json",
    null,
    Phaser.Tilemap.TILED_JSON
  );
  // Phaser.Canvas.setSmoothingEnabled(this.game.context, false);
  this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
  this.game.scale.setUserScale(3, 3);
  this.game.renderer.renderSession.roundPixels = true;
  Phaser.Canvas.setImageRenderingCrisp(this.game.canvas);
}

function create() 
{
  // Create map
  map = game.add.tilemap("map", 48, 48, 16, 16);
  map.addTilesetImage('tileset');
 

  // Use layers
  floor = map.createLayer('Floor');
  walls = map.createLayer('Walls');
  obsts = map.createLayer('Obstacles');
  map.setCollisionBetween(1,1000);
  

  // create player
  player = game.add.sprite(50,50,'player');

  // all physics related stuff
  game.physics.startSystem(Phaser.Physics.ARCADE);

  game.physics.enable(player, Phaser.Physics.ARCADE);

  player.body.setSize(10, 14, 2, 1);

  player.body.collideWorldBounds = true;

  // walk animations
  player.animations.add('idle',[0,1,2],10,true);
  player.animations.add('walk_right', [12,13,14,15],10,true);
  player.animations.add('walk_left', [20,21,22,23],10,true);
  player.animations.add('walk_down', [8,9,10,11],10,true);
  player.animations.add('walk_up', [16,17,18,19],10,true);

  //attack animations
  player.animations.add('attack_down', [24,25,26,27],10,true);
  player.animations.add('attack_right', [28,29,30,31],10,true);
  player.animations.add('attack_left', [32,33,34,35],10,true);
  player.animations.add('attack_up', [36,37,38,39],10,true);

  player.animations.play('idle');

  game.camera.follow(player);
  
}

function update() 
{
  game.physics.arcade.collide(player,obsts);
  
  player.body.velocity.set(0);
  // Walk mechanic
  if(game.input.keyboard.isDown(Phaser.Keyboard.A))
  {
    player.animations.play('walk_left');
    player.x -= speed;
  }
  else if (game.input.keyboard.isDown(Phaser.Keyboard.D))
  {
    player.animations.play('walk_right');
    player.x += speed;
  }
  if(game.input.keyboard.isDown(Phaser.Keyboard.W))
  {
    player.animations.play('walk_up');
    player.y -= speed;
  }
  else if (game.input.keyboard.isDown(Phaser.Keyboard.S))
  {
    player.animations.play('walk_down');
    player.animations.stop;
    player.y += speed;
  } 

  // attack mechanic
  if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
  {
    player.animations.play('attack_left');
  } 
  if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
  {
    player.animations.play('attack_right');
  }
  if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
  {
    player.animations.play('attack_up');
  } 
  if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
  {
    player.animations.play('attack_down');
  }
  //jump back to idle when not walking or attacking
  else if (
    !game.input.keyboard.isDown(Phaser.Keyboard.A) && !game.input.keyboard.isDown(Phaser.Keyboard.D) && !game.input.keyboard.isDown(Phaser.Keyboard.W) && !game.input.keyboard.isDown(Phaser.Keyboard.S) &&
    !game.input.keyboard.isDown(Phaser.Keyboard.UP) && !game.input.keyboard.isDown(Phaser.Keyboard.DOWN) && !game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && !game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){
    player.animations.play('idle');
  }
}

```

Also, if you find any other mistakes, fell free to add suggestions to those as well. I’m new to phaser and have no clue what I’m doing.

---

<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:** [May 7, 2019, 8:38pm UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/2 "2019-05-07T20:38:45Z")

</div>

Add in create():

```
obsts.debug = true;
```

---

<div class="post-metadata">

**Author:** ![LapopenJesus](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@LapopenJesus](https://phaser.discourse.group/u/LapopenJesus)\
**Post date:** [May 7, 2019, 8:40pm UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/3 "2019-05-07T20:40:45Z")

</div>

done it, nothing changes.

There should be green squares right?

---

<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:** [May 7, 2019, 11:10pm UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/4 "2019-05-07T23:10:56Z")

</div>

All the map layers are showing, and the rest of the game is working?

Also look in browser console for errors.

---

<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:** [May 7, 2019, 11:21pm UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/5 "2019-05-07T23:21:22Z")

</div>

If you zip and upload I can take a look.

---

<div class="post-metadata">

**Author:** ![LapopenJesus](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@LapopenJesus](https://phaser.discourse.group/u/LapopenJesus)\
**Post date:** [May 8, 2019, 9:01am UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/6 "2019-05-08T09:01:49Z")

</div>

Nothing is highlighted when enable the debug function

Sadly I cannot upload anything because I’m a new user

---

<div class="post-metadata">

**Author:** ![LapopenJesus](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@LapopenJesus](https://phaser.discourse.group/u/LapopenJesus)\
**Post date:** [May 8, 2019, 10:25am UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/7 "2019-05-08T10:25:32Z")

</div>

what other infos do you need? I can provide some more

---

<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:** [May 9, 2019, 4:09am UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/8 "2019-05-09T04:09:09Z")

</div>

I don’t see any obvious problems and it’s hard to debug without the tilemap. Can you upload anywhere else?

---

<div class="post-metadata">

**Author:** ![LapopenJesus](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@LapopenJesus](https://phaser.discourse.group/u/LapopenJesus)\
**Post date:** [May 9, 2019, 5:50am UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/9 "2019-05-09T05:50:03Z")

</div>

I uploaded it to [Google Drive](https://drive.google.com/open?id=1Zu09vsOXbBtLlCQxUfPitQNkZBdrq2Ot), maybe this works.

---

<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:** [May 9, 2019, 8:36pm UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/10 "2019-05-09T20:36:43Z")

</div>

OK, you need to make two changes:

1. Add a `layer` argument:

2. Move the player by setting velocity (not position).

---

<div class="post-metadata">

**Author:** ![LapopenJesus](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@LapopenJesus](https://phaser.discourse.group/u/LapopenJesus)\
**Post date:** [May 10, 2019, 7:43am UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/11 "2019-05-10T07:43:40Z")

</div>

Ok so far, I wanna kiss you feet! Thank you so much 😃 The player collides now with the obstacles, but for some reason the collisions are not quite where the green squares are, but rather randomly spread on the map. Is it because the setCollisionBetween has such a big range?

---

<div class="post-metadata">

**Author:** ![LapopenJesus](https://avatars.discourse-cdn.com/v4/letter/l/dfb087/32.png) [@LapopenJesus](https://phaser.discourse.group/u/LapopenJesus)\
**Post date:** [May 10, 2019, 9:03am UTC](https://phaser.discourse.group/t/collision-between-tilemap-layer-and-player-not-working/2373/12 "2019-05-10T09:03:19Z")

</div>

nvm, found my problem. The collision for the player sprite was offset!