search

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

y clamp issue #262

Open dr-waterstorm opened 3 years ago

dr-waterstorm commented 3 years ago

I'm currently working on an app using pixi-viewport (which is great by the way) and I wanted to restrict the user from "scrolling" out of view. So I'm using bounce on the x-axis and I'm using clamp with "direction: 'y'" for the y-axis: 

viewport.clamp({direction: 'y'})

This causes the viewport to restrict the y movement (and with the bounce plugin causes a bounce on x). This worked perfectly fine.

However I added some new things, which caused my world to "go into the negative space". Therefore I wanted to change the clamp to something like "top: -200". So I went ahead and tried to set top and bottom as described here: https://davidfig.github.io/pixi-viewport/jsdoc/global.html#ClampOptions

viewport.clamp({top: -200, bottom: viewport.worldHeight})

This caused the whole app to fail. It starts "bouncing" all the time to the left and never stops moving. I've tried to use all kinds of values, also "20000" instead of the world height. But I decided to test out the "default":

viewport.clamp({top: 0, bottom: matrixViewport.worldHeight})

which I'd expect to work just like direction: 'y'. But it does not. This simply causes the whole viewport to vanish after rendering. I can see it loading stuff, but once it's done, it simply disappears.

Is there something I'm doing wrong? Or is this an issue of pixi-viewport?

I'd be happy to provide more feedback / videos if needed.

davidfig commented 3 years ago

Hmm...weird. Can you mock up a jsfiddle so I can play with it? Also, make sure that the worldHeight calculation is correct. If the world bounds are wrong, it may be calculating stuff incorrectly.

My guess is that this is a bug in viewport because of the negative top.

dr-waterstorm commented 3 years ago

Thanks for having a look at it. I tried to recreate it with a few lines of code (the actual app has grown pretty big ;-) ) https://jsfiddle.net/r1jkx456/

I have the two clamp lines in there, one is commented. If you open it up, it works as intended, the viewport is limited on the y-axis but you can move and bounce on "walls" on x-axis.

But once you change this code:

    .clamp({ direction: 'y' })
    //.clamp({top: -50, bottom: viewport.worldHeight})

to this:

    //.clamp({ direction: 'y' })
    .clamp({top: -50, bottom: viewport.worldHeight})

the "bounce goes wild"

Thank you!

davidfig commented 3 years ago

Cool. Thanks for the fiddle. Definitely problematic. Let me do a bit more digging and see if i can figure out what's going on. I have a feeling the bounce and clamp are somehow conflicting.