Move Sprite using PathFinder Plugin

[thyagoluciano]

Hello guys, First sorry for my English.

I need help for move a sprite in a layer using the plugin ( PathFinder). I can move the sprite, when using the update method. But when I try to create a specific method (MoveSprite) I can not move the sprite.

 

follow the link to view: http://jsbin.com/hutomuqi/3/edit

[thyagoluciano]

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'gameContainer', { preload: preload, create: create, update: update, render: render });

function preload() {

    game.load.tilemap('desert', 'assets/desert.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('tiles', 'assets/tmw_desert_spacing.png');
    game.load.spritesheet('char', 'assets/sprite/hero/sprites_male.png', 64, 64);

}

var map, layer, sprite, marker, pathfinder;
var click = true;

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

    game.world.setBounds(0, 0, 1248, 1248);

    map = game.add.tilemap('desert');
    map.addTilesetImage('Desert', 'tiles');

    layer = map.createLayer('Ground');
    layer.resizeWorld();

    var walkables = [30];

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


    sprite = game.add.sprite(450, 80, 'char');
    game.physics.enable(sprite, Phaser.Physics.ARCADE);

    sprite.body.setSize(32, 16, 0, 10);
    sprite.anchor.setTo(0.5, 0.5);

    sprite.animations.add('down', [130,131,132,133,134,135,136,137], 10);
    sprite.animations.add('left', [117,118,119,120,121,122,123,124,125], 10);
    sprite.animations.add('right', [143,144,145,146,147,148,148,150,151], 10);
    sprite.animations.add('up', [104,105,106,107,108,109,110,111], 10);

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

    // Habilita o Debug;
    sprite.debug = true;
    layer.debug = true;
}

function update(){
    marker.x = layer.getTileX(game.input.activePointer.worldX) * 32;
    marker.y = layer.getTileY(game.input.activePointer.worldY) * 32;

    if (game.input.mousePointer.isDown)
    {
        if(click){
            click = false;
            findPathTo(layer.getTileX(marker.x), layer.getTileY(marker.y));
        }
    }
}

function findPathTo(tilex, tiley) {

    pathfinder.setCallbackFunction(function(path) {
        path = path || [];

//        console.log(path);

        console.log(layer.getTileX(sprite.body.x), layer.getTileX(sprite.body.y));

        for(var i = 1, ilen = path.length; i < ilen; i++) {
            map.putTile(46, path.x, path.y);
            console.log(path.x, path.y);
        }

        movePlayer(path);
    });

    pathfinder.preparePathCalculation([layer.getTileX(sprite.body.x),layer.getTileY(sprite.body.y)], [tilex,tiley]);
    pathfinder.calculatePath();
}

function movePlayer(path){
    var i = 1;

    var interval = setInterval(function () {
        // Finaliza o setInterval
        if(i === path.length){
            clearInterval(interval);
            click = true;
        }

//        console.log(path.x, path.y);
//        console.log(layer.getTileX(sprite.body.x), layer.getTileY(sprite.body.y));

        // Movimenta o Sprite;
        if(layer.getTileX(sprite.body.x) != path.x){
            sprite.body.x = path.x * 32;
            game.physics.arcade.moveToXY(sprite, path.x * 32, path.y * 32, 100);
        }else{
            if(layer.getTileY(sprite.body.y) != path.y){
                sprite.body.y = path.y * 32
            }
        }

        i++

    }, 150);
}

function render(){
    game.debug.body(sprite);
    game.debug.body(layer);
}
 

[ClonkMobile]

Hi thyagoluciano,

i managed it with the Code at the bottom but pay Attention this is not performance optimized Code

 

var Enemy = function(game, x, y, name, frame) {    Phaser.Sprite.call(this, game, x, y, name, frame);    this.path = [];    this.next_positX = 0;    this.next_positY = 0;}Enemy.prototype = Object.create(Phaser.Sprite.prototype);Enemy.prototype.constructor = Enemy;Enemy.prototype.update = function(i) {    this.moveOnTilemap();}Enemy.prototype.moveOnTilemap = function(i) {    if (this.path) {        this.x += this.speedX;        this.y += this.speedY;        if (this.speedX > 0 && this.x >= this.next_positX) {            this.x = this.next_positX;            this.nextTile();        } else if (this.speedX < 0 && this.x <= this.next_positX) {            this.x = this.next_positX;            this.nextTile();        } else if (this.speedY > 0 && this.y >= this.next_positY) {            this.y = this.next_positY;            this.nextTile();        } else if (this.speedY < 0 && this.y <= this.next_positY) {            this.y = this.next_positY;            this.nextTile();        }    }}Enemy.prototype.nextTile = function() {    if (this.path) {        if (this.curTile < this.path.length) this.curTile++;        if (this.path[this.curTile]) {            this.next_positX = parseInt(this.path[this.curTile].x * GlobalGame.tileSquare);            this.next_positY = parseInt(this.path[this.curTile].y * GlobalGame.tileSquare);        }        if (this.next_positX > this.x) {            this.speedX = this.speed;            this.angle = 0;        } else if (this.next_positX < this.x) {            this.speedX = -this.speed;            this.angle = 180;        } else {            this.speedX = 0;        }        if (this.next_positY > this.y) {            this.speedY = this.speed;            this.angle = 90;        } else if (this.next_positY < this.y) {            this.speedY = -this.speed;            this.angle = -90;        } else {            this.speedY = 0;        }    }}module.exports = Enemy;