Jump to content

Bunny drag example with correct mouse offset


Recommended Posts



disclaimer: pixi newb here.


I am working on an isometric example and as such want to be able to drag the background to move the scene.

Starting from the bunny example (#8) I noticed a behavior that isn't desirable for my particular case. Once you click on the bunny, the sprite jumps to center at your mouse cursor. It's barely noticeable because the bunnies are rather small, but once you tried this with larger sprites, it is pretty obvious:



I am not sure if this is the most elegant solutions (comments welcome) but the way I solved this was to introduce to new local variables in mousedown...

this.sx = this.data.getLocalPosition(bunny).x * bunny.scale.x;this.sy = this.data.getLocalPosition(bunny).y * bunny.scale.y;

...and to change the position with this offset in mousemove.

this.position.x = newPosition.x - this.sx;this.position.y = newPosition.y - this.sy;

Working example here:





Link to comment
Share on other sites

  • 3 years later...
  • 2 weeks later...

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