I’m making a top-down game in Phaser and am using Tiled for the tilemap. I set some of the blocks to collide with the player but only does 1 block down and to the right.

The player should be colliding with the orange highlighted area but is instead stopping at the purple highlighted area.

Here is my tilemap, collision, player code:

  const map = this.make.tilemap({key: 'map'});
  const tileset = map.addTilesetImage('RPG Nature Tileset', 'tiles')
  const floor = map.createStaticLayer('Tile Layer 1', tileset, 0, 0)
  const collision = map.createStaticLayer('Tile Layer 2', tileset, 0, 0)

  collision.setCollisionByProperty({collides: true});

  player = this.physics.add.sprite(2048, 2048, "player").setScale(0.4);
  this.physics.add.collider(player, collision);

  const debugGraphics = this.add.graphics().setAlpha(0.75);
  collision.renderDebug(debugGraphics, {
    tileColor: null, // Color of non-colliding tiles
    collidingTileColor: new Phaser.Display.Color(243, 134, 48, 255), // Color of colliding tiles
    faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Color of colliding face edges
  });