tilemap layer and player not colliding with eachother PHASER

[icetimux]

Hi, Im making a platformer in Phaser and have successfully loaded a tilemap but my player doesn't collide with the tilemap layer. Here's my code.

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

function preload() {
    this.game.load.atlas('player', 'assets/player/player_full.png', 'assets/player/player_full.json');
    game.load.image('bg', 'assets/bg-LONG.jpg');

    // TILEMAP
    game.load.tilemap('world', 'assets/tilemaps/world.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('world_tiles', 'assets/tilemaps/world.png');
}

var player;
var facing = 'right';
var map;
var tileset;
var layer;

function create() {
    // START PHYSICS
    game.physics.startSystem(Phaser.Physics.ARCADE);

    // ADD SPRITES
    game.add.tileSprite(0, 0, 900, 200, 'bg');
    game.world.setBounds(0, 0, 900, 200);


    // PLAYER
    player = game.add.sprite(10, 176, 'player');

    player.animations.add('idle_right', ['idle_1_right.png', 'idle_1_right.png', 'idle_2_right.png', 'idle_3_right.png'], 4, true);
    player.animations.add('running_right', ['running_1_right.png', 'running_2_right.png', 'running_3_right.png', 'running_4_right.png', 'running_5_right.png', 'running_6_right.png'], 9.5, true);

    player.animations.add('idle_left', ['idle_1_left.png', 'idle_1_left.png', 'idle_2_left.png', 'idle_3_left.png'], 4, true);
    player.animations.add('running_left', ['running_1_left.png', 'running_2_left.png', 'running_3_left.png', 'running_4_left.png', 'running_5_left.png', 'running_6_left.png'], 9.5, true);

    player.animations.add('jump_right', ['jump_1_right.png', 'jump_2_right.png', 'jump_3_right.png', 'jump_4_right.png', 'jump_5_right.png', 'jump_6_right.png'], 7, true);
    player.animations.add('jump_left', ['jump_1_left.png', 'jump_2_left.png', 'jump_3_left.png', 'jump_4_left.png', 'jump_5_left.png'], 7, true);

    // WORLD
    game.physics.arcade.gravity.y = 600;
    game.physics.enable(player, Phaser.Physics.ARCADE);
    player.body.collideWorldBounds = true;
    player.body.height = 24;

    // OTHER
    game.camera.follow(player);

    // TILEMAP
    map = game.add.tilemap('world');
    map.addTilesetImage('world', 'world_tiles');
    layer = map.createLayer('Tile Layer 1');
    layer.resizeWorld();
}

function update() {
    player.body.velocity.x = 0;
    game.physics.arcade.collide(player, layer);

    if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
    {
        facing = 'right';
        player.body.velocity.x = 90;
        player.animations.play('running_right');
    }else if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
        facing = 'left';
        player.body.velocity.x = -90;
        player.animations.play('running_left');
    }

    if (game.input.keyboard.isDown(Phaser.Keyboard.UP) && player.body.onFloor() && game.input.keyboard.addKey(Phaser.Keyboard.UP).downDuration(1)) {
        if (facing == 'right') {
            player.animations.play('jump_right');
            player.body.velocity.y = -230;
        }else{
            player.animations.play('jump_left');
            player.body.velocity.y = -230;
        }
    }

    if (player.body.velocity.x == 0 && player.body.onFloor() && player.body.velocity.y == 0) {
        if (facing == 'right') {
            player.animations.play('idle_right');
        }else{
            player.animations.play('idle_left');
        }
    }
}

function render(){
    game.debug.spriteInfo(player, 10, 20);
}

 

[mickeyren]

i believe your missing the call to one of the tilemap methods that marks which tiles are collidable.

example: 

map.setCollisionByExclusion([], true, this.collisionLayer);

 

I wrote a tutorial just recently that covers top down tilemaps:

https://www.programmingmind.com/phaser/topdown-layers-moving-and-collision