Phaser 3.17 doesn't setect collision between tilemap layer and player sprite

Question

No collisions between map layer and player sprite. But collisions between world bounds work. What is wrong?

I tried different workarounds that could find online and none of them worked.

Game config

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: "#f",
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: gameState.gravity },
            debug: true
        }
    },
    scene: {
        preload,
        create,
        update
    }
};

Code in create() regarding the tilemap and its layers and the character

gameState.map = this.add.tilemap('map');
gameState.dungeonTileset = gameState.map.addTilesetImage('dungeon', 'dungeonTiles');

gameState.backgroundLayer = gameState.map.createStaticLayer('Background', gameState.dungeonTileset);
gameState.mapLayer = gameState.map.createStaticLayer('Map', gameState.dungeonTileset);
gameState.miscLayer = gameState.map.createStaticLayer('Misc', gameState.dungeonTileset);

gameState.mapLayer.setCollisionByExclusion([-1]);

this.physics.world.bounds.width = gameState.mapLayer.width;
this.physics.world.bounds.height = gameState.mapLayer.height;

gameState.player = this.physics.add.sprite(73, 398, 'player', 0);
gameState.player.setCollideWorldBounds(true);

this.physics.add.collider(gameState.player, gameState.mapLayer);

No warning and no errors are coming up in the console. I don't know what to do anymore.

Thanks in advance!

Answer 1

I have addited a little bit the original example so you can see how it looks, I think the problem in your code is the line concerning gameState.mapLayer.setCollisionByExclusion([-1]); but am not sure because I can't see how the tilemap is created

var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 576,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    loader: {
      baseURL: 'https://labs.phaser.io',
      crossOrigin: 'anonymous'
    },
    pixelArt: true,
    physics: {
        default: 'arcade',
        arcade: { gravity: { y: 300 } }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);
var map;
var cursors;
var player;
var groundLayer;

function preload ()
{
    this.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png');
    this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/tile-collision-test.json');
    this.load.image('player', 'assets/sprites/phaser-dude.png');
}

function create ()
{
  map = this.make.tilemap({ key: 'map' });
  var groundTiles = map.addTilesetImage('ground_1x1');

  map.createDynamicLayer('Background Layer', groundTiles, 0, 0);
  groundLayer = map.createDynamicLayer('Ground Layer', groundTiles, 0, 0);
  
  groundLayer.setCollisionBetween(1, 25);//here

  player = this.physics.add.sprite(80, 70, 'player')
      .setBounce(0.1);

  this.physics.add.collider(player, groundLayer);

  cursors = this.input.keyboard.createCursorKeys();
  this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
  this.cameras.main.startFollow(player);

}


function update ()
{

  player.body.setVelocityX(0);

  if (cursors.left.isDown)
  {
      player.body.setVelocityX(-200);
  }
  else if (cursors.right.isDown)
  {
      player.body.setVelocityX(200);
  }

  if (cursors.up.isDown && player.body.onFloor())
  {
      player.body.setVelocityY(-300);
  }
}

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>