Fixed time-step game loop understanding

[zigazak]

Hi guys, my first post on these forums, how exciting 

 

A little background of myself - I am a web developer by profession, and most of my experience is within the tradition lamp stack / php development, however, I've seen the light! Although I've always know enough javascript to get by, and understand most simple concepts, i've never really truly understood the language. I've fallen head over heels in love with the language and much prefer 'the javascript way' of prototypal inheritance, synchronous programming, dynamic typing, etc. I've recently been trying to broaden my low level javaScript knowledge, and I love games, so most most of my tinkering has been within the game development realm.

 

ANYWAYS, enough of the life story, basically what i've done is tried to fully grasp the idea of a game loop written in javascript - I was hoping to get as much feedback / suggestion / constructive criticism as I could. So without further adue, I present to you, my understanding of a fixed time-step game loop written in javascript.

var Game = function() {    // our fixed time-step // 60 FPS // or 16.667 ms per frame    this.timeStep = 1000 / 60;    // used to store the relative 'execution' time of the previous frame    this.lastFrameTime = 0;    // used to store the time taken to process the previous frame    this.deltaTime = 0;    // used to store update calls within our 'time-step' simulation    this.updateCalls = 0;    // the maximum number of update calls we'll allow before we intervene    this.maxUpdateCalls = 240;    // start our loop - bind our local execution context (the game object)    requestAnimationFrame(this.mainLoop.bind(this));}// timestamp: indicates the current time when callbacks queued by// requestAnimationFrame begin to fire. think of it as "startFrameTime"// this is automatically passed by the requestAnimationFrame functionGame.prototype.mainLoop = function(timestamp) {    // this function is called when our update calls exceed the maximum    // update call limit, either our update logic has taken too long to    // process, resulting in a very large deltaTime, or the window has    // lost focus.    function panic() {        console.log('WARNING :: loop panic!');        this.deltaTime = 0; // discard the unsimulated time        // snap the player to the authoritave state (from the server)    }    // the accumulation of the remaining delta time from the last    // update + the time taken to process the previous frame (the delta time)    this.deltaTime += timestamp - this.lastFrameTime;    // set the last frame time to the current timestamp    // this is confusing, we are basically setting our 'last frame time'    // for the next frame    this.lastFrameTime = timestamp;    // reset our update call counter    this.updateCalls = 0;    // simulate the total elapsed time in fixed-size chucks while the time taken to    // render the frame is greater or equal to the desired timestep (the amount of    // time we want to render a frame (16.667ms))    // If the time that has passed since the last frame is less than the    // fixed simulation time, we just won't run an update() until the the next frame    // the remaining time left over is added to the next frame's delta time    while (this.deltaTime >= this.timeStep) {        // !!!!! update  with our fixed time step (1000/60 === 16.667) !!!!! //        // decrease our desired time step time from the accumulated delta        // until it is less than 16.667ms        this.deltaTime -= this.timeStep;        // are we in a spiral of death        if (++this.updateCalls >= this.maxUpdateCalls) {            panic();            break;        }    }    // !!!! draw our game objects !!!! //    requestAnimationFrame(this.mainLoop.bind(this));}

I've also read about FPS throttling, but I don't really understand the concept. I'm under the impression that if you have a fixed time-step and 'simulate' updates within your game loop, you'll never breach the time-steps resulting FPS, in this case 60 frames per second. Am I not understanding something correctly?

 

 

[d13]

I'm not sure about your code, but there was a thread on here a while back that went into this in a quite a lot of detail:

 

http://www.html5gamedevs.com/topic/8716-game-loop-fixed-timestep-variable-rendering/?hl=%2Bfixed+%2Btimestep

[zigazak]

I'm not sure about your code, but there was a thread on here a while back that went into this in a quite a lot of detail:

 

http://www.html5gamedevs.com/topic/8716-game-loop-fixed-timestep-variable-rendering/?hl=%2Bfixed+%2Btimestep

 

Cool! Looks awesome, i'll check it out when I get home from work. Thanks for this

[pathogen]

Also: A Tale of Two Clocks

But it certainly looks like you've got the right idea with the while loop waiting until it's time to call the next frame!

[Vege]

It's bad practice to limit your game under 200 ish frames per second. 60 Will not do. 120 is pushing it and thus far 200 is about the right max rendering speed. Separate animation and rendering from eachother.