get scale for fit world / using snap and snapZoom concurrently

Hi there. This is a brilliant library and one of my main reasons for choosing pixi.js. Thank you so much!

I am using this.viewport.snap for the benefit of animation and it works. The viewport animates, taking a direct route to where I want it to be.

I then started using this.viewport.snap and this.viewport.snapZoom together concurrently and it works. The viewport animates, BUT no longer takes a direct route to where I want it to be. Instead the animation arrives at the correct destination, following a kind of “backwards-C-shaped” path (this only happens if the zoom level is not 1).

I didn’t like this and noticed the path improved when I changed the “topLeft option of snap” to false. My snap now looks like this:

    const snapX = this.circle.x
    const snapY = (this.browserHeight / 2) / this.scaleFit
    this.viewport.snap(snapX, snapY, {
      ease: 'linear',
      time,
      topLeft: false,
      friction: 0,
      removeOnComplete: true,
      removeOnInterrupt: true,
      forceStart: true
    })

This works perfectly and the viewport animation path is much improved. The value scaleFit is the scale value after calling this.viewport.fitWorld(). The snapY algorithm essentially puts the top world border at the top of the screen and works for any zoom level AKA scale.

However, I don’t want to call this.viewport.fitWorld() as I initially want the world zoomed at scale 1.

To get around this, I have come up with a bit of a hacky solution:

• call this.viewport.fitWorld()
• save the scale value as this.scaleFit
• call this.viewport.setZoom(1)

To avoid this hack, I need one of these solutions:

(1) A way of using this.viewport.snap and this.viewport.snapZoom concurrently such that the viewport animation path isn’t a “backwards-C-shaped” path. I would like the path to following a somewhat direct route or something less wild / more controlled. OR (2) A method for getting what the scale value would be if I called this.viewport.fitWorld() without actually calling it OR (3) An algorithm for (2) OR (4) A snapY algorithm that puts the top world border at the top of the screen and works for any zoom level AKA scale but avoids setting the “topLeft option of snap” to be true (due to the viewport path animation problems this causes when using this.viewport.snap and this.viewport.snapZoom concurrently).

Would be so thankful for some help. Much appreciated and amazing library! My work would be impossible without it

Dan

[danday74]

Further to above, the problem with bounce was a problem with my code not yours 😃 The animation is NOT janky when used with bounce.

[davidfig]

I’ve had a couple of requests for an animation plugin that would allow for similar functionality to snap/snapZoom but with more sane pathing. It’s on my list, but it likely won’t be in the short term.

To make sure you’re not blocked, you can cut/paste the code for fitWorld: https://github.com/davidfig/pixi-viewport/blob/8e1b887dac6dc814463a8e8fbc141bd4ddd9df35/src/viewport.js#L521. It’s relatively straightforward:

(Change this.* to viewport.* in your vode)

        this.scale.x = this.screenWidth / this.worldWidth
        this.scale.y = this.screenHeight / this.worldHeight
        if (this.scale.x < this.scale.y)
        {
            this.scale.y = this.scale.x
        }
        else
        {
            this.scale.x = this.scale.y
        }