Consistant Timing

[Gico62]

Hello

My project ( HTML5) is a game wich allow a certain time to play ( eg :30s). I use a progress bar clip to show the elapsed time and control the end of the game. But I can't rely on a consistant frame rate, sometime the progress bar end in 30s some other time : 40 s...is there a way to a have a constistant control over the timing of an animation ?

thanks

[JoãoCésar]

How are you measuring your time?

If you use createjs.Ticker and set its interval property to 1000 ms (1 s), you should get the result you want. Like this:

var that = this;
var count = !isNaN(parseInt(that.txt.text)) ? parseInt(that.txt.text) : 30; // or just assign your total time here
var listener = createjs.Ticker.on("tick", loop, this);
function loop(e)
{
    count--;   
    if (count <= 0)
        createjs.Ticker.off("tick", listener);
    that.txt.text = String(count);
}
createjs.Ticker.interval = 1000; // fires the loop handler at every second
this.txt.text = count;

[ClayUUID]

No. The Ticker is what regulates the frame rate of the timeline. He already reported that his timeline isn't keeping up with realtime. And even if that did work, he'd be forcing the frame rate of his entire project to one frame per second!

To implement a timer that's independent of the effective frame rate of the timeline, just use the native JavaScript setInterval or setTimeout functions.

[JoãoCésar · Accepted solution]

Oh I see...

Thanks, ClayUUID​!

Somehow I thought this Ticker approach would be framerate independent... And it's really gonna force the frame rate of the entire project to one frame per second.

The good news are that the code will be practically the same using a setInterval approach:

var that = this;
var count = !isNaN(parseInt(that.txt.text)) ? parseInt(that.txt.text) : 30; // or just assign your total time here
var interval = setInterval(loop, 1000);
function loop(e)
{
    console.log(count);
    count--;    
    if (count <= 0)
        clearInterval(interval);
    that.txt.text = String(count);
}
this.txt.text = count;

Please let me know if something is still wrong or can be improved.

Regards,

JC

[Gico62]

Thanks to both of you.

First i noticed that my project issues are a lot dependant of the number of  windows opened in the browsers. The timing seem more consistant in Chrome than in Firefox. But I have take account on those parameters, because they happen to be in the "real world". The ClayUUID solution is interesting, i tested it with some timing issues, but it seems more consistant. It will lead me to change my concept. Till now, the timing  was dependant of a clip animation, a progress bar. With this solution the progress bar animation will have to be dependant of the loop function (don't know yet how to do this !).

I remember a time ( long time ago) when i struggled a lot with flash animations, the solution, then, was to add a soundtrack  (even with blank sound) in an animation clip to be sure he will last a certain time ( the sound reading was leading the timing). But it was pure action script. Here; the issue seem to be a javascript performance issue, in the browser.

Anyway, i try to use your solutions and i will go back to tell what's working best

Thanks a lot

regards

Gilles

[Gico62]

Hi,  i used the "setInterval" function as a starting point, and it seems, that one can trust it better than the frame rate of a clip to get a steady count. The timing is not perfect, 30 s can be 34 but that's the best I get till now. I had to change the progress bar to a clock like animation, the needle move according to the seconds with some script...that's fine. Thanks.

[JoãoCésar]

Did some research and found out that the setInterval is not really reliable. These two links suggest that using the Date object + a setTimeout is the best option.

time - How to create an accurate timer in javascript? - Stack Overflow

javascript - Createjs create timer clock for game - Stack Overflow  (suggested by gskinner, the creator of CreateJS)

So I adapted the previous code. See if it works best for you.

var that = this;
var count = !isNaN(parseInt(that.txt.text)) ? parseInt(that.txt.text) : 30; // or just assign your total time here
var interval = 1000; // ms
var expected = Date.now() + interval;
function step()
{
    var dt = Date.now() - expected; // the drift (positive for overshooting)
    if (dt > interval)
    {
        // something really bad happened. Maybe the browser (tab) was inactive?
        // possibly special handling to avoid futile "catch up" run
    }
    count--;       
    that.txt.text = String(count);
    if (count > 0)
    {
        expected += interval;   
        setTimeout(step, Math.max(0, interval - dt)); // take into account drift
    }   
}
setTimeout(step, interval);
this.txt.text = count;