Drawing lines in update loop

[macikera]

Hi,
i have a problem similar to this 

But this solution doesn't work for me. I've got function which finds path between two players and returns it as an array. I want to draw this path using this code:
 

var drawPath;

function create(){
   drawPath = game.add.graphics(0,0);
   drawPath.lineStyle(2, 0x00FF00, 0.1);
}

function update() {
   //Draw path
   path = pathFinder(zombie.x,zombie.y,player.x,player.y);
   // drawPath.clear();
   drawPath.moveTo(path[0].x*tileWidth+tileWidth/2,path[0].y*tileHeight+tileHeight/2);
   for(var i=1; i<path.length; i++) drawPath.lineTo(path[i].x*tileWidth+tileWidth/2,path[i].y*tileHeight+tileHeight/2);
}

With commented drawPath.clear() lines I get something like this:

When I uncomment that line nothing happends. Have you any idea why?
Another thing is that using foreach instead of for doesn't work as well - i've solved that, but I'm just curious - why?

Best regards,
Maciek

[samid737]

Hi, I made an example for you( Its how I learn for myself atm) :

https://jsfiddle.net/samid737/e85veagy/79/

In the example I made up a path of three points, which is assumed to be your output of your pathFinder function.It turns out that you need to restate the fillstyle, since graphics.clear() also cleares the fillsstyle.

https://phaser.io/docs/2.3.0/PIXI.Graphics.html#clear

[macikera]

I think the better way to do this is return an array of objects instead of object of objects (that is in my case). Another thing is that you should change function name from drawPath(myPath) to drawthePath(myPath). 
I corrected your code a bit:

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

var drawPath;
var myPath;
var zombie;
var player;
function preload() {}

function create() {

  zombie=game.add.sprite(100,100);
  player=game.add.sprite(200,200);

  myPath=[{x:0,y:50},{x:100,y:200},{x:300,y:100}];
  game.stage.backgroundColor = '#3e5f96';

  drawPath = game.add.graphics(0, 0);

  //  lineThickness, lineColor
  drawPath.lineStyle(2, 0xff0000, 1);

  drawthePath(myPath);

}


function drawthePath(thePath){
   for(var point in thePath){
    //console.log(myPath[point].x);
      drawPath.lineTo(myPath[point].x,myPath[point].y);
     }
}

function update(){

}

function render() {

}

and it works:

Sorry, I've never used JSFiddle.
But my problem is that I try to redraw this path each time in update loop, but when I try to clear the previous one nothing happens (Nothing draws at all).
Any ideas?

[samid737]

@macikera, I think I got what you was looking for : you need to restate the fillstyle, since graphics.clear() also cleares the fillsstyle. This line:       pathgraphics.lineStyle(2, 0xff0000);

https://jsfiddle.net/samid737/e85veagy/79/

https://phaser.io/docs/2.3.0/PIXI.Graphics.html#clear

I see thanks for the tips, I didn't really know how to setup the array so I just made something basic  But the problem was something easy overlooked I guess...

[macikera]

Sorry I misunderstand you at first. Now it's all clear. Thanks for your help, it works now!