Draw line between two sprites, continuously update when dragging

[phaserdev]

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();
}

 

[dimumurray]

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().

[jdnichollsc]

See this example: http://www.emanueleferonato.com/2014/12/15/phaser-tutorial-creation-of-an-html5-string-avoider-prototype-working-on-mobile-devices-too/

 

Regards