Continuously updated line between 2 sprite centres

[markp]

I have 2 similar sprites that can be moved by a mouse or tween independent of one another.  I want to draw a line between the centres of each of the two sprites.  When the sprites are moved I want the line to always remain drawn from one sprite's centre to the other sprite's centre.

 

I'm using v2.0 and typescript so I think in terms of classes.  I'm thinking Phaser.Line and its fromSprite method but I'm having trouble with this method accessing 'center' properties on the sprites but those properties don't appear to exist, and if I don't use centering the x and y on the sprite is used which are actually on a position object instead so that doesn't work either. 

 

I'm calling the code like this:

 

this.line = new Phaser.Line().fromSprite(startSprite, endSprite, true);

 

I decided to draw the line by passing the centres of my two sprites into the constructor of Line which at least creates the line object.  However, I tried adding the line to a group that I use as a layer for these lines between sprites but the JS exceptions when I attempt to do so.  Is it possible to add a Line to a group?  I need to do this so that the line is drawn above the sprites it joins.

 

I've noticed that the Geometry Line demo is broken too using similar functionality that I want to achieve.

[rich]

Typical, just when I thought I had updated all the examples for 2.0 someone finds a broken one

 

I have re-coded the 2 Line demos and uploaded to both the site and git repo. So please have a look at how it's now done. Basically Sprites don't have a center property any more, so you have to either create one, or set the anchor of your sprite to 0.5, or don't use the center at all I guess.

 

Also Lines are just pure geometry, they can't be added to Groups. Groups are containers for display objects (sprites, images, buttons, other groups, custom classes, etc). They have no actual rendering component at all. Depending on what you're trying to achieve you may want to create a BitmapData, apply it to a Sprite, and then render your Line to the BitmapData? (that is what I do in my missile command clone). Or if you don't have many lines you could use a Graphics object which has a lineTo function.

[Anny]

I need to create lines between 2 sprites like the question before, I tried with this.line = game.add.bitmapData(800, 600); but I don't know why it doesn't work with more than one line, so I went with new Phaser line and I can't find a way to make the lineWidth bigger.

 

What I need is to "connect" sprites with lines, what would be the best way to implement this?

 

Thanks

[rich]

If it's just a simple line then I would use a Graphics object (look at it's functions moveTo and lineTo). Understand that lots of Graphics objects will cause slow-down in WebGL, so keep a close eye on performance, but for the most part this seems like the most sensible approach. There's no reason why you couldn't use a Phaser.Line object to store and maintain your lines, testing for intersection, etc and then just render it using Graphics calls.