Draw Line from one sprite to another

[localtoast_zader]

Assuming 2 sprites in a scene, how does one draw a line from one to the other? Here's my attempt, starting from one of the examples in the sandbox:

 

function create (data)
{
    const sprite1 = this.add.sprite(100, 100, 'mech');
    const sprite2 = this.add.sprite(400, 400, 'mech');

    sprite1.setInteractive();
    sprite1.on(
        'pointerdown',
        () => this.add.line(
            0,
            0,
            sprite1.x,
            sprite1.y,
            sprite2.x,
            sprite2.y,
            0xff0000
        )
    );
}

result after clicking:

 

Slope and magnitude looks right, but the starting and ending points appear wrong. Can anyone see what I'm doing wrong?

src_scenes_boot data.js

[localtoast_zader]

I was able to mostly solve my issue by using the `Phaser.Geom.Line` as opposed to the `Phaser.GameObjects.Line`:

// creating my line
const line = new Phaser.Geom.Line(
  sprite1.x,
  sprite1.y,
  sprite2.x,
  sprite2.y
);

// in Scene.update()
this.graphics.strokeLineShape(line)

I'd still like to be able to do some "GameObject-y" things with these lines though, so if someone can help with the original question that'd be much appreciated!!

[GreenCloversGuy]

Having played around with it, it looks like you need to set the origin of the line to (0, 0). 

    sprite1.on(
        'pointerdown',
        () => this.add.line(
            0,
            0,
            sprite1.x,
            sprite1.y,
            sprite2.x,
            sprite2.y,
            0xff0000
        ).setOrigin(0, 0)
    );

The reason for this is because the line is being drawn from it's centre. It's easier to explain with a rectangle. 

    let r2 = this.add.rectangle(sprite1.x, sprite1.y, sprite2.x-sprite.x, sprite2.y-sprite.y, 0x6666ff)

(I don't know if this is how Phaser draws shaped, however the outcome is the same, so I'll use it as an example.)This code will draw a rectangle with a width and height that is the difference between the two sprites. It will draw this sprite around the origin, which is set to the centre of the shape by default. So, the shape is drawn around the origin, with the top left corner being in the top left quadrant, with both x and y being negative. When it's moved, we add the cooordinates of spritex and sprite.y to it, causing the lop left corner of the sprite to be to the left and above the moved coordinates. 

I explained this really badly, I'll try and draw a picture of this later. 

[localtoast_zader]

Much appreciated! I'll look to mess around with setOrigin - still very new to phaser so discovering alot as I go.