tilemap collision HELP

[u_furan]

help with collision. 

When I add collision it's layer has offset (or not work). You can show demo in https://game.tlgrm.info/phaser.html.

var game = new Phaser.Game(900, 600, Phaser.AUTO, 'gameTroll', { preload: preload, create: create, update:update, render:render});

  function preload () {

    game.load.tilemap('level', 'assets/level.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.spritesheet('dude', 'assets/NPC.png', 16, 32);
    game.load.image('snow-expansion', 'assets/snow-expansion.png');
    game.load.image('tiles_packed', 'assets/tiles_packed.png');
    
  }

  var cursors;
  function create() {
    game.world.setBounds(0, 0, 1400, 1400);

    map = game.add.tilemap('level');

    map.addTilesetImage('snow-expansion');
    map.addTilesetImage('tiles_packed');


    Voda = map.createLayer('Voda');
    Ostrova = map.createLayer('Ostrova');
    Atributika = map.createLayer('Atributika');
    collision = map.createLayer('collision');
    player = game.add.sprite(16, 32, 'dude');

    map.setCollisionByExclusion([0], true, 'collision')
    Ostrova.resizeWorld()
    collision.resizeWorld()

    collision.debug = true

    player.animations.add('down', [0, 1, 2, 3], 7, true);
    player.animations.add('right', [4, 5, 6, 7], 7, true);
    player.animations.add('up', [8, 9, 10, 11], 7, true);
    player.animations.add('left', [12, 13, 14, 15], 7, true);
    
    game.physics.enable(player, Phaser.Physics.ARCADE);
    player.body.setSize(16, 32, 50, 50);
    player.body.bounce.y = 0;
    player.body.collideWorldBounds = true;
    player.bringToTop();

    
    var startPos = map.objects.Meta.find(c => c.name == "start")
    player.x = startPos.x;
    player.y = startPos.y;
    
    game.camera.follow(player);
    // game.camera.x = 314;
    // game.camera.y = 390;

    cursors = game.input.keyboard.createCursorKeys();
    
  }
  
  var facing;
  function update() {

  	game.physics.arcade.collide(player, collision);
      
    player.body.velocity.x = 0;
    player.body.velocity.y = 0;

    if (cursors.left.isDown)
    {
        player.body.velocity.x = -100;

        if (facing != 'left')
        {
            player.animations.play('left');
            facing = 'left';
        }
    }
    else if (cursors.right.isDown)
    {
        player.body.velocity.x = 100;

        if (facing != 'right')
        {
            player.animations.play('right');
            facing = 'right';
        }
    }

    else if (cursors.up.isDown)
    {
        player.body.velocity.y = -100;

        if (facing != 'up')
        {
            player.animations.play('up');
            facing = 'up';
        }
    }
    else if (cursors.down.isDown)
    {
        player.body.velocity.y = 100;

        if (facing != 'down')
        {
            player.animations.play('down');
            facing = 'down';
        }
    }
    else
    {
        if (facing != 'idle')
        {
            player.animations.stop();

            if (facing == 'down')
            {
                player.frame = 0;
            }
            else if (facing == 'right')
            {
                player.frame = 4;
            }
            else if (facing == 'up')
            {
                player.frame = 8;
            }
            else if (facing == 'left')
            {
                player.frame = 12;
            }

            facing = 'idle';
        }
    }

  }

  function render() {

    game.debug.cameraInfo(game.camera, 32, 32);

  }

 

[bhudson91]

I'm not sure why your exclusion isn't working, but i thought i would throw out how I handle collisions because I'm new and I really struggled to get collisions in my game working. I have a little 32x32 redSquare.png that I made with paint. I make a layer in Tiled called "Collisions" as the topmost layer. I then use my red square and put it everywhere I want my player to collide. I then add the image and layer just as you are doing except I put the layer as the first rendered layer so that you cannot see it. I then put the line 

map.setCollision(137, true, 'Collisions');

137 is the ID of the red square image. You can find this by checking the .json file that you get when you import it into tiled. There are a number of ways to do collision, but I struggled to get many of them working. I found this method to be very easy. Let me know if you want to try this method and have any problems.