Varying framerate (FPS)

Question

In my game-loop, I am using fixed time step for physics and interpolation for rendering as suggested on Gaffer on Games | Fix Your Timestep!

However, when the framerate is varying between 30-60fps during the game, the game looks jumpy. For example, balls suddenly look accelerated when the frame rate increases from 35 to 45 suddenly.

Is there a way to make the game look smooth while framerate is varying?

Here is my game loop:

protected void update(float deltaTime) {
    //do some pre stuff

    deltaTimeAccumulator +=deltaTime; //deltaTimeAccumulator is a class-member holding the accumulated frame time
    while(deltaTimeAccumulator>FIXED_TIME_STEP) {
        world.step(FIXED_TIME_STEP, 6, 2);  //perform physics simulation
        deltaTimeAccumulator-=FIXED_TIME_STEP;
    }
    // world.step(deltaTime, 6, 2);

    destroyBodiesScheduledForRemoval();
    render(deltaTimeAccumulator /FIXED_TIME_STEP); //interpolate according to the remaining time
}

Here is the part related to the interpolation (related inner works of render() method) : this.prevPosition = this.position; //get previously simulated position

    this.position = body.getPosition(); //get currently simulated position

    //interpolate
    Vector2 renderedPosition = new Vector2();
    if (prevPosition != null) {//&& !isFloatApproximatelyEquals(this.prevPosition.x, this.position.x) && !isFloatApproximatelyEquals(this.prevPosition.y, this.position.y)) {
        renderedPosition.x = this.position.x * interpolationAlpha + this.prevPosition.x * (1 - interpolationAlpha);
        renderedPosition.y = this.position.y * interpolationAlpha + this.prevPosition.y * (1 - interpolationAlpha);
    } else {
        renderedPosition = position;
    }

    //Draw the object at renderedPosition

Answer 1

Temporal Aliasing

As Andon M. Coleman is stating out in the comments what you describe is called temporal aliasing.

Temporal aliasing is due to a too low sampling rate of the scene compared to the the transformation speed of one or more objects within the same scene. In other words if an Object of the scene is more often updated (transformation speed to high) compared to the to the number of frames per second (sampling rate to low) temporal aliasing artefacts are appearing and the Object/s seem/s to jump around.

---

To avoid temporal aliasing you have to increase the sampling rate aka your FPS without increasing the transformation speed( your number of update calls ).

One way of doing this, see this example here: Vittoria Romeo's Tutorials

            while(running)
            {
                auto timePoint1(chrono::high_resolution_clock::now());

                window.clear(Color::Black);

                inputPhase();
                updatePhase();
                drawPhase();        

                auto timePoint2(chrono::high_resolution_clock::now());
                auto elapsedTime(timePoint2 - timePoint1);
                FrameTime ft{chrono::duration_cast<
                    chrono::duration<float, milli>>(elapsedTime).count()};

                lastFt = ft;

                auto ftSeconds(ft / 1000.f);
                auto fps(1.f / ftSeconds);
            }   

The key is now to take a close look into the updatePhase:

void updatePhase()
        {

        // If `currentSlice` is greater or equal than `ftSlice`,
        // we update our game logic and decrease `currentSlice` by
        // `ftSlice` until `currentSlice` becomes less than `ftSlice`.
        // Basically, if `currentSlice` is three times as big as `ftSlice`,
        // we update our game logic three times.

            currentSlice += lastFt;
            for(; currentSlice >= ftSlice; currentSlice -= ftSlice)
            {   
                //logic
                someupdatefunction(FixedtimeStep)
            }
        }

What we do is to divide our time in different slices:

 |............|............|............|..........
 |            |            |            |
 \-> slice    \-> slice    \-> slice    \-> slice

And, every frame, we will call update(mFT) "n" times, where "n" is the number of slices we passed through with our last frametime. Example:

       v-----+frametime---+--v
 |............|............|............|..........
 |            |            |            |
 \-> slice    \-> slice    \-> slice    \-> slice

In the above example, in the time it took to process a single frame, we went over two different slices. We will then call update(mFT) twice in the same frame.

No matter how big or how small or last frametime was, we will always call update(mFT) in fixed intervals (our slices). If the game goes extremely fast, we will completely skip the updating phase during certain frames. If the game goes extremely slow, we will probably need to update multiple times during a single frame. This method allows fine control over our movement precision, and guarantees the same behavior with any FPS.

This explanation is from Vittorio Romeo. You will find a complete tutorial how to implement this there via source code or Video. Vittoria Romeo's Tutorial