# Drawing sprite from coords to coords

## Recommended Posts

Hi guys,

I want to draw a sprite (sort of a decorative line png, like 5 pixels wide and 200 pixels in height) from one coordinate to the another.

So it needs to scale and rotate.

Maybe if I set the pivot or anchor point (whats the difference?) I want something like drawSpriteToCoords(xSource, ySource, xDestination, yDestination)

Thanks!

##### Share on other sites

``````sprite.anchor.set(0.5, 0.0);
sprite.position.set(x1, y1);
var dx = x2-x1, dy = y2-y1;
sprite.rotation = Math.atan2(dy, dx) - Math.PI/2;
sprite.height = Math.sqrt(dx*dx*+dy*dy);``````

##### Share on other sites

Awesome thanks @ivan.popelyshev I was already trying something like this out. This is perfect, I'll give it a shot!

##### Share on other sites

May the Math be with you!

Also, dont forget that "height = xxx" is actually setting "scale.y = xxx / texture.height"

``````var texture = new PIXI.Texture(brushTexture, brushTexture.frame.clone());
//now we have new texture!

var sprite = new PIXI.Sprite(texture);

...

//sprite.height = ..
texture.frame.height = Math.min(Math.sqrt(dx*dx+dy*dy), brushTexture.height);
texture._updateUvs();``````

##### Share on other sites

@ivan.popelyshev is that reply for me?

The sprite goes into the right rotation but the scaling seems to go off?

##### Share on other sites

2 hours ago, ivan.popelyshev said:
``````sprite.anchor.set(0.5, 0.0);
sprite.position.set(x1, y1);
var dx = x2-x1, dy = y2-y1;
sprite.rotation = Math.atan2(dy, dx) - Math.PI/2;
sprite.height = Math.sqrt(dx*dx*+dy*dy);``````

Ah! Got it, you had a small typo.

Should be;

`sprite.height = Math.sqrt(dx*dx+dy*dy);`

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

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.