pixi-viewport

pixi-viewport copied to clipboard

In my app, additional content will be added to the app when the user gets closed to boundaries. It's a map. My center is supposed to be located in 0, 0 and then spread from there in all directions. I don't want users to get too far in the nothingness unless it has loaded more stuff in there so I was trying to add .bounce method but it doesn't really work in the negative coordinates, at least for me.

So if I set:

worldWidth: 1250,
worldHeight: 1250,

Then do something like this:

viewport
    .drag()
    .pinch()
    .wheel()
    .bounce();
...
viewport.moveCenter({x: 0, y: 0});

it automatically moves the center due to boundaries pushing it. Basically the real center is still in 1250/2 and 1250/2 while I want it to completely move to 0, 0 and all methods to follow that rule.

The world then needs to be in x: -625 - 625, y: -625 - 625, but I haven't found a way to set the coordinates. So I cannot use .bounce unless it accepts the boundaries I want it to follow.

Any way to get this done without creating own .bounce method?

Yes, we added an option recently to enable this. I forgot to upload the regenerated docs. Use options.bounceBox: https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html#bounce

Oh cool, @davidfig , thank you!

I've stumbled upon a few difficulties. First of all width and height don't seem to be actual width and height of the .bounce boundaries. They work for me as a regular x2, y2 coordinates.

So I use .bounce({'bounceBox': {x: -625, y: -625, width: 625, height: 625}});

Instead of .bounce({'bounceBox': {x: -625, y: -625, width: 1250, height: 1250}});

And even then some weird stuff is happening. When I zoom further out .bounce is supposed to align the viewport in the middle but it's not, instead, it always centers in the bottom right corner of the viewport. I've created a pen below, see yourself. I can force it to center again (I think I tried that) but the behavior just seems odd to me. Can you explain?

https://codepen.io/Telion/pen/dyowOVx

The bounceBox coordinates are in world coordinates. So if the world is has stuff from -100,-100 to 100, 100, then to add bounce to the entire world, you would set the bounceBox to { x: -100, y: -100, width: 200, height: 200}. It uses "world" coordinates.

I wasn't able to follow your demo code to understand how the world was set up compared to how the bouncebox was set up. Let me know if you have any questions.