Good suggestion lennaert,
I don't know if you're familiar with lerp() ThunderLion, but Lennaert is using it in his formula above to smooth out changes in the layoutScale over time.
"lerp()" is a super handy function, which I'll try to explain a bit below. It can be found in the System's expressions in the math section, or you can just type "lerp()" in an expression.
The lerp() function helps you pick numbers between a starting value and an ending value.
So lerp() answers the following kind of question...
Suppose you're on a road, starting at the 300 mile marker, and you're travelling to the 400 mile marker.
Once you've travelled 50% of the way to your destination, what mile marker are you standing next to?
Well, 50% of the way from 300 to 400, you'd be right in between them at 350.
lerp( start , end , percentage )
(The percentage in this case is expressed as 0 to 1, instead of 0% to 100%)
lerp( 300 , 400 , 0.50 ) returns 350.
Here are some examples:
e.g. Some different percentages.
lerp( 300 , 400 , 0.75 ) = 375
lerp( 300 , 400 , 1.00 ) = 400
lerp( 300 , 400 , 0.00 ) = 300
e.g. Starting with a big number and ending at a small one.
lerp( 400 , 300 , 0.75 ) = 325
e.g. Some different values.
lerp( 3 , 4 , 0.50 ) = 3.5
lerp( -10 , 10 , 0.50 ) = 0
lerp( -10 , 10 , 0.25 ) = -5
lerp( -10 , 10 , 0.75 ) = 5
e.g. Percentages outside the 0to 1 range.
Using a percentage larger than 1.0, (i.e. larger than 100%), returns a number as if you overshot your destination and just kept travelling at the same speed.
lerp( 300 , 400 , 1.50 ) = 450
lerp( 300 , 400 , 2.00 ) = 500
lerp( 300 , 400 , -0.50 ) = 250
lerp( 300 , 400 , -0.75 ) = 225
lerp( 300 , 400 , -1.00 ) = 200
Using lerp() to smooth out a value over time
In lennaert's example, he's using the lerp() function to make the layoutScale value change over time smoothly, from the value it currently is, to the value it currently should be.
Suppose that layoutScale is currently 1, but you've moved to the corner, so it currently should be 2.
If we want layoutScale to smoothly move from it's current value to a target value, instead of just setting it directly to the target value (not smooth), we can move it part way to the target value every tick.
Let's move layoutScale's current value half way to the target value each tick.
(A little fast, but it makes the example numbers easier to follow.)
So we should expect to see the following, if we start at "1" and head for a target of "2".
Tick 0: layoutScale = 1.00
Tick 1: layoutScale = 1.50
Tick 2: layoutScale = 1.75
Tick 3: layoutScale = 1.875
We get closer and closer to 2 every tick.
How can we use lerp() to do this?
Every tick: Set layoutScale to lerp( layoutScale , 2 , 0.5 ).
The first tick layoutScale will get set from 1 to 1.5.
On the second tick layoutScale will get set from 1.5 to 1.75.
The only problem with the above lerp() is that we don't want the target to always be "2", so we can replace it with the formula that tells us what the zoom should currently be based on player position in the layout.
Every tick: Set layoutScale to lerp( layoutScale , layoutScaleTargetValue , 0.5 ).
If you want the approach speed to be slower you can use a smaller percentage.
Every tick: Set layoutScale to lerp( layoutScale , layoutScaleTargetValue , 0.1).
Frame (tick) rate independence
So far so good, but notice that the speed we approach the target value is partly dependant on the number of ticks.
With an approach rate of 50%, after 2 ticks we're 75% of the way to the destination. The problem is, it doesn't matter if we are playing the game at 30 ticks (frames) per second or 120 ticks per second, it always takes 2ticks.
Imagine we use a small approach rate percentage, so that the value transition takes 60 ticks to get all the way (99.9%) to the destination, If the game runs at 60 ticks per second, the transition will take 1 second, but if the game runs at 30 ticks per second, the transition will take 2 seconds, because the transition still takes 60 ticks, and now the ticks are occurring half as often.
What we need is a way to double the lerp()'s approach percentage, when the time between ticks doubles, (e.g. when the game slows down due to CPU load).
We need to make the approach percentage proportional to the time between ticks.
Fortunately, Construct gives us a variable "dt" (delta time) which gives us the time between the current tick and the last tick, in seconds, which is exactly what we need.
So we just multiply the approach percentage by dt, to get the tick rate proportionality we're looking for.
Every tick: Set layoutScale to lerp( layoutScale , layoutScaleTargetValue , 0.5 * dt ).
Remember though that "dt" is tick time in seconds, so at 60 ticks per second dt will usually be about 1/60 ~= 0.0167, which is a smallish number. So you may need to compensate by adjusting the constant part of your original approach percentage, (i.e. the "0.5" in our case).