pixi-viewport

pixi-viewport copied to clipboard

When attempting to move outside of clamp bounds, the entire world jitters horribly. The world essentially seizures until the deceleration brings it back to the clamping bounds.

My plugins are as follows:

new Viewport({
  // ... required screen and world width/heights
})
  .clamp({ direction: 'all', underflow: 'center' })
  .drag()
  .pinch()
  .decelerate()

I've tried using bounce options, different frictions, etc. but nothing seems to make the move just stop when hitting the clamp bounds.

My ideal behavior would be that if a move is attempted that would bring the view outside of the clamp bounds, it would just not perform that move. Any tips on how to implement this?

I face those jitters too and fixed that by adding .clamp({ direction: 'all', underflow: 'center' } ) on viewport initialization + after viewport resize. Same for clampZoom.

@agoncharovdev I am awestruck, that works. Do you have any explanation for why that works?

Edit: Actually, doing it only on resize only fixed the clamping for drag/pinch movement. Wheel scrolling still jitters. Calling clamp(...) again on a utility ticker did the trick, but I'm unsure of the performance impacts this might have.

While clamp is super cheap, you shouldn't have to call it on every frame when the viewport is stable. Can you replicate the jitter with simple code? My guess is that it's caused by the clamp alternating between two clamping conditions.

We actually ended up pushing the clamp() ticker solution to prod, so I can't just point you at our site anymore. I'll try and make a reproduction on codesandbox soon.

Using drag({ clampWheel: true }) fixes this.

It works when you call .clamp() after setting the drag options. Vice versa you get this jittering if dragging outside the world bounds.

viewport.drag().clamp({
    direction: 'all'
})