tiled map + Easystar (pathfinding)

[bloudman]

Hello everyone!

I've got a little problem with phaser and this plugin https://github.com/appsbu-de/phaser_plugin_pathfinding.
I copied the code of the example and adapted it to my own. That give me that: 

 

const width = 1280;
const height = 720;

// Phaser
var game = new Phaser.Game(width, height, Phaser.AUTO, 'game', { preload: preload, create: create, update: update});
var voiture;
var map;
var layer;
var layer1;



var upKey;
var downKey;
var leftKey;
var rightKey;


//PATHFINDING
var pathfinder;
var cursors;
var blocked = false;

function preload () {
    game.load.image('car', 'img/car.png');

    game.load.tilemap('mapTest', 'map.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('tiles', 'img/tileset.png');


}

function create() {

    game.physics.startSystem(Phaser.Physics.ARCADE);

    game.stage.backgroundColor = '#fffff0';
    map = game.add.tilemap('mapTest');
    map.addTilesetImage('tileSet', 'tiles', 16, 16, 0); 

    layer = map.createLayer("background");
    layer1 = map.createLayer("collide");
    map.setCollisionBetween(1, 2, true, layer1);
    layer1.debug = true;
    
    //layer.resizeWorld();
    //layer1.resizeWorld();

    voiture = game.add.sprite(game.world.centerX - 50, game.world.centerY, 'car');
    voiture2 = game.add.sprite(game.world.centerX, game.world.centerY, 'car');
    game.physics.enable(voiture, Phaser.Physics.ARCADE);
    game.physics.enable(voiture2, Phaser.Physics.ARCADE);

    game.physics.enable(layer1, Phaser.Physics.ARCADE, true);

    voiture.body.collideWorldBounds = true;
    voiture2.body.collideWorldBounds = true;
    voiture2.body.immovable = true;

    
    upKey = game.input.keyboard.addKey(Phaser.Keyboard.UP);
    downKey = game.input.keyboard.addKey(Phaser.Keyboard.DOWN);
    leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
    rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
    
    voiture.body.velocity.x = 10;

    //PATH FINDING
    var walkables = [30];
    pathfinder = game.plugins.add(Phaser.Plugin.PathFinderPlugin);
    pathfinder.setGrid(map.layers[0].data, walkables);
    


    marker = game.add.graphics();
    marker.lineStyle(2, 0x000000, 1);
    marker.drawRect(0, 0, 16, 16);
}



//PATH FINDING FUNCTION:
function findPathTo(tileX, tileY) {

    console.log(tileX, tileY);
    pathfinder.setCallbackFunction(function(path) {
        path = path || [];
        console.log(path);
        for(var i = 0, ilen = path.length; i < ilen; i++) {
            console.log(path);
            //marker.drawRect(path.x, path.y, 32,32);
        }
        blocked = false;
    });

    //console.log(mouseX, mouseY);
    //console.log(voiture.body.x, voiture.body.y);
    //pathfinder.preparePathCalculation([voiture.body.x, voiture.body.y], [mouseX, mouseY]);

    pathfinder.preparePathCalculation([0,0], [tileX, tileY]);
    pathfinder.calculatePath();
}


function update() {
    if (upKey.isDown) {
        voiture.body.y-=2;
    }
    else if (downKey.isDown) {
        voiture.body.y+=2;
    }

    if (leftKey.isDown) {
        voiture.body.x-=2;
    }
    else if (rightKey.isDown) {
        voiture.body.x+=2;
    }


    marker.x = layer.getTileX(game.input.activePointer.worldX) * 16;
    marker.y = layer.getTileY(game.input.activePointer.worldY) * 16;

    if (game.input.mousePointer.isDown)
    {
        blocked = true;
        //marker.drawRect(game.input.x, game.input.y, 32, 32);
        findPathTo(layer.getTileX(marker.x),layer.getTileY(marker.y));
    }



    layer1.body.x+=2;

    game.physics.arcade.collide(voiture, voiture2);
    game.physics.arcade.collide(voiture, layer1);

    game.debug.bodyInfo(voiture, 16, 24);


}

It's hard to find doc about this pluggin and I don't know why it doesn't work so if someone who know it can help me :/ 

Thanks by advance!