davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.04k stars 174 forks source link

Bounce box works, but places image not in center #437

Closed ThomasvanHoutum closed 1 year ago

ThomasvanHoutum commented 1 year ago

Hi all, I am using pixi-viewport in vue 3. I got the bounce box to work and I've set it up like so:

viewport.bounce({
          friction: .1,
          bounceBox: new Rectangle(0, 0,
              window.innerWidth,
              window.innerHeight)
        })

But when the image crosses the boundries it bounces back, but not to the center of the screen. How can I achieve that?

Thanks in advance.

(Sorry for low frame rate, file was too big) Animation

ThomasvanHoutum commented 1 year ago

I've found a way.

Instead of centering the image by calculating the x & y position based on the window widht & height / 2 minus the image width & height,

img.x = (window.innerWidth / 2) - (img.width / 2);
img.y = (window.innerHeight / 2) - (img.height / 2);

I used PixiJs-viewport's moveCenter function to center the image:

viewport.moveCenter(img.x, img.y);

This places the image in the center, and when dragged out of bounds it bounces back to the center as well.