Jump to content

Pixi.js sprites offset when dragging


Recommended Posts

View the jsfiddle demonstrating the issue (just click and drag the circle - relevant code on line 102).

When I add a circle to the stage with Pixi.Graphics and drawCircle( 150, 100, 50 ), the circle when dragged becomes offset by it's position ( +150, +100 ) in the Graphics container.

(and if we request the circle.position it's also inaccurate)

What's the best way to add a shape to the screen and set it's position if it's not through a Graphics container?

Link to comment
Share on other sites

1.  Its common newbie mistake. Position of graphics is independent from shapes. What do you think will happen with position if you draw two circles?

graphics.position.set(150, 100)
graphics.drawCircle(0, 0, 50)

2. There was a thread about dragging two weeks or so ago, i posted working code there. Im on mobile device, so, please find it on your own

Link to comment
Share on other sites

I think this is the post you're referencing, which is very helpful thank you.

I'm testing out your code but I'm still experiencing the shape being offset while dragging, check out this new fiddle demonstrating where I'm at. (click and drag the circle multiple times, it's origin is always where it was originally set)

I still don't understand how Pixi expects me to add shapes to the screen with drag controls, because it seems that I'm doing it wrong and it's screwing up the dragging.

Link to comment
Share on other sites

Ok, first, clone() doesnt work in v4, right, but that doesnt mean you just can use an assignment there. we NEED that oldPosition, there's no way you calculate drag without it. And without clone() it wil be always the same as current position

//in dragstart
this.oldPosition = new PIXI.Point();
//in dragmove
pv.x = pv2.x + (newPosition.x - this.dragPos.x);
pv.y = pv2.y + (newPosition.y - this.dragPos.y);


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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...