CODEWITHSUNDEEP
javascriptpixi.js
ThomasSTA
ThomasSTA

Reputation: 31

PixiJS viewport bounce box not centered

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? I want it to either the center of the screen or the top left.

Thanks in advance.

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

https://user-images.githubusercontent.com/123364387/225952814-75692ab1-c14f-4a3e-87c8-5dd56fe97a4a.gif

Upvotes: 0

Views: 380

Answers (1)

ThomasSTA
ThomasSTA

Reputation: 31

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.

Upvotes: 1

Related Questions