Jump to content

Drawing lines in update loop


macikera
 Share

Recommended Posts

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:
forum.png.a1309141226021f92386632138eb651c.png

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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:

58e4af6547472_Zrzutekranu2017-04-05o10_48_00.thumb.png.d44826f58b234781b8ffc4c1a5d6653f.png

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?

Link to comment
Share on other sites

@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 :P But the problem was something easy overlooked I guess...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...