Jump to content

Draw Line from one sprite to another


localtoast_zader
 Share

Recommended Posts

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:

image.png.a16bd8a49933f07bfc7856e8ce3fc285.png

 

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

Link to comment
Share on other sites

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!!

Link to comment
Share on other sites

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. 

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