When using fit(), fitWorld() or one of the findFit...() methods the image will never center on the viewport

[bencresty]

Hi,

I'm pretty sure I'm missing something here, but fitWorld() is only scaling here, never sets the center of the container to the actual center of the viewport (= screen here). I both tried fit() and fitWorld() both with and without the center boolean. When it DOES move the object it never moves it to the center of the viewport; when moving it will only get stuck to the y-top or have the (0,0) of the image aligned with the center of the screen. I've walked through all class methods to see if I'm missing something here, but can't find anything that might be related to this and I would expect fitWorld() to always both scale as well as center a container.

Could somebody please tell me what I'm missing here?

[bencresty]

Just found out that this works:

this.vp.fitWorld(false);
this.vp.moveCenter(this.worldSize.width * 0.5, this.worldSize.height * 0.5);

I still would expect that fit() and worldFit() would center too, so I'm not sure if this is the way to go. Also not sure what exactly the 'center' boolean in the fit methods does than. Anybody could please confirm if above two lines are the correct way to do this?

Thanks in advance!

BTW Great plugin. Thanks for all the effort!

[davidfig]

The center parameter in the fit function maintains the current center of the viewport after scaling. The current center is defined as the point at the middle of the screen when calling the function. Under the hood it does something like:

fit() {
   const save = viewport.center.clone(); // eg, centerX = viewport.x + viewport.screenWidthInWorldPixels / 2;
   // fit code
   viewport.moveCenter(save);
}

So if you have a sprite at the center of the screen at 100, 100 and you call fit(), then that sprite will still be at the center after scaling.

[bencresty]

@davidfig Alright, I understand and it makes sense. So there's no special method to both center and fit at the same time for the world or a region right? Would've been nice to have a param to tell one of the fit()-methods to center it on screen while fitting (perhaps with an optional screen-offset in pixels), but this will do.

So this is the right way to fit and center the full world than?

this.vp.fitWorld(false);
this.vp.moveCenter(this.worldSize.width * 0.5, this.worldSize.height * 0.5);

Or, when doing with animation:

// set this.vpScaleDefault on a resize

this.vp.animate({
        time: dur * 1000,
        scale: this.vpScaleDefault,
        position: new Point(
            this.worldSize.width * 0.5,
            this.worldSize.height * 0.5),
        ease: ease,
    });

Keep up the great work! Very nice plugin to use!