using delta timing is causing shake

Question

I am using delta timing to account for potential drop in frame rate. Only trouble being when I do this, I can notice an ever so slight wobble. I checked out the following JSFiddle coming from a tutorial on the subject and I can even see the wobble there, specifically on the 30fps example. http://jsfiddle.net/straker/bLBjn/

my code is:

var delta = {
    now: 0,
    last: 0,
    difference:0,
    time: 1000/60
}

var d = function(val){
    return val/delta.time * delta.difference;
}

Then further down at the game loop

delta.last = Date.now();
animate();
function animate(){
    delta.now = Date.now();
    delta.difference = delta.now - delta.last;
    delta.last = delta.now;

    //update a sprite
    platform.x -= d(10);

    requestAnimationFrame( animate );
}

How can I keep the animation smooth?

You don't need to call Date.now, because requestAnimationFrame calls back with a high-res timestamp as the first argument. There's a handy example on MDN demonstrating that. I don't know if that's the cause of the "wobble" you're seeing though. Try it. — Anko, Oct 13 '14 at 15:39

score 1 · Answer 1 · answered Oct 13 '14 at 15:59

The problem is most probably the window.setTimeout(callback, 1000 / 60); and then using (% 10 == 0). The window.setTimeout() callbacks are not "accurate". Thus, if you update your objects this causes the noticeable wobble.

Also your timeout functions runtime is shorter or longer depending on "counter % 2 == 0" and "counter % 10 === 0" is true. So you should call window.setTimeout() for the next callback directly at the beginning of the method!

var animate = (function () {
    return function (callback, element) {
        window.setTimeout(callback, 1000 / 60);
        if (counter % 2 === 0) {
            animate30();
        }

        if (counter % 10 === 0) {
            animate10();
        }

        counter = ++counter % 60;
    };
})();

Better would probably be the usage of window.setInterval() as like this:

var animate = (function () {
    var ref =  function() {
        animate60();
        if (counter % 2 === 0) {
            animate30();
        }

        if (counter % 10 === 0) {
            animate10();
        }

        counter = ++counter % 60;
    };
    window.setInterval(ref, 1000/60);
    return ref;
})();

A working example can be found at http://jsfiddle.net/t0sxynvc/.

using delta timing is causing shake

1 Answers1