zigazak Posted June 25, 2015 Share Posted June 25, 2015 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? Quote Link to comment Share on other sites More sharing options...
d13 Posted June 26, 2015 Share Posted June 26, 2015 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 Quote Link to comment Share on other sites More sharing options...
zigazak Posted June 26, 2015 Author Share Posted June 26, 2015 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 Quote Link to comment Share on other sites More sharing options...
pathogen Posted July 3, 2015 Share Posted July 3, 2015 Also: A Tale of Two ClocksBut it certainly looks like you've got the right idea with the while loop waiting until it's time to call the next frame! Quote Link to comment Share on other sites More sharing options...
Vege Posted July 3, 2015 Share Posted July 3, 2015 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.