What is the best way to do a smooth zoom towards a part of a sprite?

[GammaBreak]

My game involves some zooming/panning, and I'm struggling with making it feel natural.

Ideally, what I would like to do is have it zoom and pan directly towards the face of the sprite, but all my attempts so far are resulting in janky movement. Like first panning the sprites yalign before zooming, or zooming onto another part of the sprite before panning up to the face.

Here's one method I tried for zooming out (I imagine the zoom in would just be reversed):

Prior to this, the character is zoomed to 2.00 and the yalign is 0.0

Code: Select all

show character happy:
        subpixel True
        linear 1.0 zoom 1.00
        linear 0.1 yalign 1.0

This code zooms the character out, leaving their legs cut off below the bottom of the screen before slamming back down flush with the bottom of the screen. My goal is for this to be one smooth, continuous motion, like a camera being zoomed in by a human operator. I've tried using parallels, but haven't had much success with those, either.

[nananame]

You definitely need to use parallel blocks.

So try:

Code: Select all

show character happy:
    subpixel True
    parallel:
        linear 1.0 zoom 1.0
    parallel:
        linear 0.1 yalign 1.0

BUT make sure to understand the code and mistakes.
For example "linear 0.1 yalign 1.0" means it will take the game 0.1 second (so a tenth of a second) to go from current yaling to yalign 1.0. At the same time it will take it a whole second (linear 1.0) to go to zoom 1.0 from current zoom. so of course it is not smooth.

First try making them both last 3 seconds (my suggestion is to always go with higher numbers, as the animation takes longer you have more time to workout what is wrong). So put both to linear 3.0
Then you will see which should be slowed down, so decrease that one (the lower the number, the faster that will happen).

Play with it.

[GammaBreak]

Okay, and therein sorta lies my problem and frustration.

Setting both linear values to equal values results in a sort of 'bounce' effect to the zoom. This results in the sprite lifting off screen as it zooms out, then re-centering.

Picture a camera operator with a shoulder-mounted camera. They take a step backward and accidentally tilt the camera downward before lifting it back up to center the character; that's sort of the effect this creates, which doesn't look very good (IMO).

If I change either linear values to different times/speeds, I just wind up right back with a janky and broken zoom out. For example, a 2 with zoom and a 1 with yalign makes the 'bounce' effect even more pronounced, whereas the opposite results in the sprite getting cut off on the bottom. Basically, from my experimentation, the yalign speed can never be greater than the zoom speed.

[nananame]

I have a similar effect in one project and it took me about 20 minutes of playing to get it right.

I would suggest using ypos instead of yalign (for precision). And perhaps also setting the starting position. In fact, the best way is to do a clean test with nothing. So clear the scene and start with show and zoom. Then you will see if the image is zoomed correctly and what ypos to set. Alas, no other way than fiddling with it.

[GammaBreak]

Hm, okay, I'll give ypos a try and keep playing around with it, thanks.

[Remix]

You might find it easier to consider the zoom and move as a transition between one crop and another crop... Basically moving from a crop that is the entire image to a crop that is the zoomed in rectangle.
Once you establish those start and end rectangles the transition is basically moving from one to the other while maintaining the same size.

Code: Select all

    show bg_7:
        # Start at full image
        crop (0,0, 1280, 720) size (1280, 720)
        subpixel True
        # Over 3.0 seconds move to focus on the cropped area and rescale up to size
        linear 3.0 crop (500, 320, 160, 90) size (1280, 720)

[philat]

Align is equal to setting the anchor and pos -- you're likely getting this effect because the anchor is moving. If you want to end up at yalign 1.0, I would suggest using yanchor 1.0 and going from a ypos greater than 1 to ypos 1.0. You also don't need parallel, linear 1.0 zoom 2.0 ypos 0.0 will interpolate both values.

[GammaBreak]

Align is equal to setting the anchor and pos -- you're likely getting this effect because the anchor is moving. If you want to end up at yalign 1.0, I would suggest using yanchor 1.0 and going from a ypos greater than 1 to ypos 1.0. You also don't need parallel, linear 1.0 zoom 2.0 ypos 0.0 will interpolate both values.

That does indeed seem to be the case. I've had a lot more luck with y/xpos, even though I don't fully understand the values myself.