0 Favourites

Formula for smooth zooming & scrolling to a point?

  • Goal: I want to smoothly zoom in/out WHILE scrolling to a point point, WITHOUT it feeling wonky or swingy.

    What math formula can I use to achieve this?

    Problem: It feels like the camera is doing a curving swing rather than a straight zoom. I'm currently only using a basic Lerp formula for this.

    Capx, showing my attempt using Lerp:

    Visual illustration of how I would ideally like it to work, if I was good at maths:

    The thick red lines representing the final and starting zoom sizes.

  • The curve has to do with how you're using lerp. Since you have the in and out locations you can change the lerp to basically lerp(in.x, out.x, amount) and just add to/subtract from the amount value to a from 0 and 1. The min/max is basically like clamp but in only one direction.

    global number zoom=0

    global number amount=0

    on any key pressed

    --- set zoom to 1-zoom

    zoom=0

    --- set amount to max(amount-0.5*dt, 0)

    zoom=1

    --- set amount to min(amount+0.5*dt, 1)

    every tick

    --- scroll to (lerp(in.X,out.x,amount), lerp(in.y,out.y,amount))

    --- set layout scale to lerp(1, 0.3, amount)

  • Just wanted to chime in, although I don't know the math either. R0J0's alteration changes the speed of your zooming (your original lerp had referenced its own position as it moved, in effect changing it from a linear interp to an exponential one), but the curving zoom path is still there.

    The curving zoom is a perception issue. Basically, your scrolling is progressing at a steady rate (assuming R0J0's version), as well as your scaling. However, what you perceive is that in a zoomed out state, you are scrolling much slower than when you are zoomed in, even though the actual speed has stayed constant.

    To get the effect you are looking for, your scrolling speed needs to be modified by the scale: faster when zoomed out, and slower as you zoom in.

    Edit: Quick hack - not the final answer since the scrolling is now jerky, but you can see the idea

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Thanks R0J0hound and oosyrag, much appreciated!

    Here's a .capx of what R0J0hound did, I tried your code but your max/min thing is a bit weird to me since it seems to make the Amount value snap instantly to 0 and 1? However when I use clamp it works fine.

    Yeah oosyrag, that's a good idea! Since I know that sin and cos are like that, I tried using cosine for the scrolling amount and while it isn't perfect it seems to work pretty well, thanks!

    edit: didn't notice your edit, your zoom is very straight! That works well, thanks.

  • Still needs some work... Using the layout scale as a multiplier for amount moved doesn't change the the base amount itself, so when the multiplier gets larger you might notice the position jumping back and forth, it is not smooth. If it changes the base amount, then the scrolling would finish before the scaling, or both scrolling and scaling would both be accelerated. I think ideally you need to have the first half slowed down equally to how much the second half is sped up, so that the total time remains the same. The way it is done in the capx I posted is only speeding up, with corrections as it resets itself to the base amount every tick that causes the jerkiness.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)