p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/)
-   Book: Professional HTML5 Mobile Game Developmen (http://p2p.wrox.com/book-professional-html5-mobile-game-developmen-707/)
-   -   DeltaTime initialisation (http://p2p.wrox.com/book-professional-html5-mobile-game-developmen/90269-deltatime-initialisation.html)

ragnarok June 4th, 2013 07:57 PM

DeltaTime initialisation
 
I enjoy the book so far very much (and love to see that Quintus is expanded as it's own project), however sometimes I got a strange bug with the initialisation of dt (delta time).

I got in the first chapters but, couldn't recreate it reliable. However with Chapter 17 and the canon-physics-demo I ran into it again.

I finally have a little clue: I happen to get the bug with Chrome. With Firefox it works.

Using "canon2.html" from Chapter 17 on Chrome 27 on Windows 8. I just added the follwing two lines to the code (before and) in the game loop, to get a clue what's going on.

Code:

      var first=true;
      Q.gameLoop(function(dt) {     
        if (first) {console.log(dt); first=false;}
        Q.clear();

        ball1.step(dt);
        ball1.draw(Q.ctx);

        ball2.step(dt);
        ball2.draw(Q.ctx);
      });

This revealed a "dt" of something like -1370384577.078 (always about this number. sometimes a little less, sometimes a little more), resulting in sprites that were placed far below/behind the canvas. On Firefox this nets me something like 0.12 which is expected.

Going further(quick and dirty again):
Code:

Q.gameLoop = function(callback) {
    var loopnumber=0;
    Q.lastGameLoopFrame = new Date().getTime();

    Q.gameLoopCallbackWrapper = function(now) {
      /*mine*/if (loopnumber==0) {console.log(now);}

      Q.loop = requestAnimationFrame(Q.gameLoopCallbackWrapper);
      var dt = now - Q.lastGameLoopFrame;

      /*mine*/if (loopnumber==0) {console.log(dt); loopnumber++;}

      if(dt > 100) { dt = 100; }
      callback.apply(Q,[dt / 1000]); 
      Q.lastGameLoopFrame = now;
    };

This reveals, that "now" is something along the lines of 120 (resulting in a negative "dt" a few lines later). My workaround for this is:

Code:

Q.gameLoop = function(callback) {
    var firstloop=true;
    Q.lastGameLoopFrame = new Date().getTime();

    Q.gameLoopCallbackWrapper = function(now) {
      /*Workaround*/ if (firstloop) {Q.lastGameLoopFrame =now);firstloop=false;}

      Q.loop = requestAnimationFrame(Q.gameLoopCallbackWrapper);
      var dt = now - Q.lastGameLoopFrame;

      if(dt > 100) { dt = 100; }
      callback.apply(Q,[dt / 1000]); 
      Q.lastGameLoopFrame = now;
    };

This works on Firefox and Chrome, but:
A) Is something broken in Chrome, or is it somehow my fault?
B) Making an (otherwise) unecessarry query ''if (firstloop)' bugs me. Is there a more elegant solution?

pascalrettig June 4th, 2013 10:42 PM

Chrome switched to a high resolution timer a while back - and this causes problems the first time around (See: http://updates.html5rocks.com/2012/0...cond-precision ) - the easiest solution is to use new Date().getTime() instead of the now parameter passed into the requestAnimationFrame wrapper.

ragnarok June 5th, 2013 03:16 PM

Thanks. That explains (and helps) a lot.

I actually got it to work with the following (only Q&D on the Chrome-Detection, but I think it'll work for the rest of the book):

Code:

Q.gameLoop = function(callback) {   
    if(window['webkitRequestAnimationFrame']) {
      //Chrome-Detection
      Q.lastGameLoopFrame = 0;
    } else {
      //Firefox-Detection
      Q.lastGameLoopFrame = new Date().getTime();
    }
   
    Q.gameLoopCallbackWrapper = function(now) {
      Q.loop = requestAnimationFrame(Q.gameLoopCallbackWrapper);
      var dt = now - Q.lastGameLoopFrame;
     
      if(dt > 100) { dt = 100; }
      callback.apply(Q,[dt / 1000]); 
      Q.lastGameLoopFrame = now;
    };

    requestAnimationFrame(Q.gameLoopCallbackWrapper);
  };



All times are GMT -4. The time now is 02:36 PM.

Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
2013 John Wiley & Sons, Inc.