How to fix stuttering in scrolling animations

tags: technical frigame

As I started working on our next game, I noticed a very strange and unpleasant behaviour: when scrolling the viewport, the animation was stuttering. Here’s how I fixed it.

The first impression that this behaviour gave me was that my computer wasn’t powerful enough to run the game, but having a constant 50fps (The refresh rate of some laptop monitors is 50Hz), and a maximum 30% CPU usage demonstrated that my computer can handle the game just fine, so there must be an elegant solution to this.

Now, anyone willing to implement a game engine should read the excellent article Fix Your Timestep! by Glenn Fiedler. In fact, if you follow (and understand) that article until the end, you’ll see that this problem has been addressed there.

Another thing to mention is that I’m also the author of the friGame library, that is used by our next game.

The problem is: I did not fully understand Glenn Fiedler’s article, so, until recently, the update/draw loop in friGame looked something like this:

friGame.draw = function (timestamp) {
    var
        newTime = timestamp,
        frameTime = newTime - currentTime
    ;

    requestAnimationFrame(friGame.draw);

    currentTime = newTime;
    accumulator += frameTime;

    if (accumulator >= dt) {
        while (accumulator >= dt) {
            playground.update();
            accumulator -= dt;
        }
    }

    playground.draw();
};

Which is based on the second to last code block from Glenn Fiedler’s article.

For years I thought that this code was good enough, it had a fixed time step of 16.67ms, and on 60Hz monitors it looked good.

Moreover I was confused by the last part of Glenn Fiedler’s article when he talks about interpolating between the previous and current physics state.

What does it mean that I have to store the previous physics state? Does it mean that I have to keep track of accelerations, speeds, and so on for every object in my game?

Moreover, if I have to keep track of the physics of the game, I can no longer use the same API in friGame, or be free to choose a different physics engine on a game by game basis.

It turns out that none of this is true, I was simply confused by the choice of words.

You see, in the last part of Glenn Fiedler’s article, the interpolation is done in order to render an intermediate state, so, in theory, the only states to keep track of are the ones that affect rendering, and these are:

• Position
• Size
• Rotating angle
• Scaling factor
• Opacity

In pratice, there is a computational cost for keeping track and interpolating all these values, so smooth scrolling can be achieved simply by keeping track and interpolating only the position of all the sprites.

So, in the latest development version of friGame the update/draw loop looks something like this:

friGame.draw = function (timestamp) {
    var
        newTime = timestamp,
        frameTime = newTime - currentTime
    ;

    requestAnimationFrame(friGame.draw);

    currentTime = newTime;
    accumulator += frameTime;

    if (accumulator >= dt) {
        while (accumulator >= dt) {
            // Keep track of all the sprite positions
            for (sprite in friGame.sprites) {
                sprite.prevLeft = sprite.left;
                sprite.prevTop = sprite.top;
            }

            playground.update();
            accumulator -= dt;
        }
    }

    playground.draw(accumulator / dt);
};

sprite.draw = function (interp) {
    var
        left = (this.left * interp) + (this.prevLeft * (1 - interp)),
        top = (this.top * interp) + (this.prevTop * (1 - interp))
    ;

    ctx.drawImage(this.img, left, top);
};

After implementing the interpolation of only the sprite positions, I was impressed by how smooth the animations have become.

I’m planning to release an update to friGame in the next few weeks, so stay tuned.

•  share
•  tweet
•  share

There are comments.

Implementing WiFi multiplayer on Cordova-based games - Part 3

tags: technical cordova

Concluding our series about local multiplayer via WiFi, we are going to address the Android bug that prevents local hostname resolution, and we will see the aspects to consider when using directly IP addresses instead of host names.

There are comments.

Implementing WiFi multiplayer on Cordova-based games - Part 2

tags: technical cordova

Last time we have seen that a great solution for implementing local multiplayer on WiFi networks is to use Zeroconf and WebSockets. In this article we will see how to use these technologies, and some implications that are not obvious at first.

There are comments.

Implementing WiFi multiplayer on Cordova-based games - Part 1

tags: technical cordova

Continuing our journey of local multiplayer technologies, in this article we will see what are the considerations to make in order to implement local multiplayer on WiFi networks.

There are comments.

Using the accelerometer in games - Part 2

tags: technical

In a previous article, we have seen that using the accelerometer for input in games is harder than it seems.

In this article we will explore other ways of using the accelerometer, with the experience gained from releasing Dawn Of Ultra Pong.

There are comments.

Multipeer Connectivity Plugin for Cordova

tags: technical multiplayer cordova

As you may remember, one of the downsides of the Multipeer Connectivity was that there was no Cordova implementation available. Well, not anymore.

There are comments.

Using the accelerometer in games

tags: technical

The accelerometer can be a good input method for some genres, think for example of racing games.

Using it is easy, it’s just a matter of mapping a value to a direction, right? Well, let’s find out.

There are comments.

Researching local multiplayer technologies for mobile devices - Part 2

tags: technical cordova

In this last part of this series, we will see a couple more technologies that can be used to implement local multiplayer on mobile devices.

There are comments.

Researching local multiplayer technologies for mobile devices - Part 1

tags: technical cordova

Our next game will feature local multiplayer, and in this blog post series I will talk about the technologies that can be used to implement such feature, their platform support, and their implementation in Cordova.

There are comments.

How the mobile HTML5 landscape has changed in 16 months

tags: technical frank the dillo cordova

Last time I blogged about it, we have seen the advantages of CocoonJS and Ejecta, but that post was back in 2014, and 16 months in the mobile landscape is an eternity.

In this blog post we will see some new possibilities for making performant HTML5 games for mobile.

There are comments.