Collision between tilemap layer and player not working

Phaser 2 / CE
1

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.

2

Add in create():

obsts.debug = true;
3

done it, nothing changes.

There should be green squares right?

4

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

Also look in browser console for errors.

5

If you zip and upload I can take a look.

6

Nothing is highlighted when enable the debug function

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

7

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

8

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

9

I uploaded it to Google Drive, maybe this works.

10

OK, you need to make two changes:

  1. Add a layer argument:

    map.setCollisionBetween(1, 1000, true, 'Obstacles');

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

11

Ok so far, I wanna kiss you feet! Thank you so much :smiley: 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?

12

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