Smooth Scrolling Background

Unity Engine
1

Hi guys,

I have implemented a scrolling background, what I have works apart from the animation being slightly choppy.

My current background is a plane with a repeating material, within the script I then simply change the offset of the texture.

To determine the new offset I am using Lerp which takes the current offset position plus a small increment to project a new offset. Animation Speed * DeltaTime is the interpolation value.

However upon playing the scene the background moves extremely choppy and is far from smooth :(. I have checked my FPS which is solidly between 59 - 61, the script uses delta time and interpolation for smoothness however the background is still choppy.

I can’t figure out what’s causing it… Any advice would be appreciated :slight_smile:

Here is a repo of an example project
https://github.com/maxhap/Jitter-Problem.git

And here is my scrolling code.

using UnityEngine;
using System.Collections;

public class Scroller : MonoBehaviour
{
    public float AnimationRate = 0.1f;
    protected float _uvOffset = 0.0f;

    // Use this for initialization
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }

    void LateUpdate()
    {

        float infrontVal = _uvOffset + 1.0f;

        _uvOffset = Mathf.Lerp( _uvOffset, infrontVal, AnimationRate* Time.deltaTime );

        if ( _uvOffset > 1.0f )
        {
            _uvOffset -= 1.0f;
        }

        if ( renderer.enabled )
        {
            renderer.material.mainTextureOffset = new Vector2( _uvOffset, 0.0f );
        }
    }
}
2

Have you tried putting the code in the normal update?

3

There is a very common mistake with Lerp, as follows:

a = lerp(a, end, time);

Note that the variable ‘a’ receives the resulting value of the Lerp, but it is ALSO inside the Lerp. This will result in an “exponential” interpolation instead of linear interpolation, since the start point of the Lerp (when time is 0) will be the new value of ‘a’.

A way to solve this is to use one additional ‘start’ variable and keep it constant during the whole Lerp process.

a = lerp(start, end, time);

The trick will be to decide when to set the value for ‘start’ and ‘end’ variables.

4

Shouldn’t be using Lerp for this anyway.

_uvOffset = (_uvOffset + animationRate * Time.deltaTime) % 1;
renderer.material.mainTextureOffset = new Vector2(_uvOffset, 0.0f);

–Eric

5

Interpolation can be used to project a new position that goes beyond the end point of a line/spline, so what it so bad about this? Mathematically it is correct no? (in this situation yes its not the fastest solution to compute)

@Eric5h5 that is actually the original way I had implemented, however I still get a jittery background movement. Could it be to do with rendering the texture?

6

It’s fine here.

–Eric

7

Lerp will only interpolate, not extrapolate. If ‘time’ is < 0 it will always return ‘start’, and if time is >1 it will always return ‘end’. If time is between 0 and 1, then it returns a two point linear interpolation.

Try making a stand alone build and run. In my machine, running my projects on the editor gives me some ugly visual jittering even at max fps, whereas on stand alone builds it runs smoothly (even though on the same fps). The jittering is way bigger with ‘statistics’ or the profiler being shown.

8

Thanks for the info guys all assume advice, once built to a device/application it is indeed smoother but still there very slightly. I guess I’l keep playing with some visual settings