Jump to content

Draw line between two sprites, continuously update when dragging


phaserdev
 Share

Recommended Posts

I have two sprites, node1 and node2, and am drawing a line connecting the two sprites.   As I drag the sprites, I want to erase the old lines, only keeping the current connected line visible.  How can I do this?  See below for current problem (image).

 

 

function update()
{
    var g = game.add.graphics(0,0);
    g.lineStyle(1,0x0088FF,1);
    g.beginFill();
    g.moveTo(node1.x,node1.y);
    g.lineTo(node2.x,node2.y);
    g.endFill();
}

 

1AY60Ow.png

Link to comment
Share on other sites

You'll need to do two things.

First, you'll need to retain a graphics instance instead of creating a new one on each update. One way is to have a variable that holds a reference to the graphics instance outside the update function. This is also a good place to set the requisite line styles assuming they don't change.

var g = game.add.graphics(0,0); g.linestyle(1, 0x0088FF, 1);

Inside the update function you'd make sure to invoke the clear() function on your graphics instance before you issue new draw commands like so:
 

function update() {    g.clear();    g.moveTo(node1.x,node1.y);    g.lineTo(node2.x,node2.y);}

Also, since you're just drawing lines you don't even need the calls to beginFill() and endFill().

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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