Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Book: Professional HTML5 Mobile Game Developmen
This is the forum to discuss the Wrox book Professional HTML5 Mobile Game Development by Pascal Rettig; ISBN: 978-1-118-30132-6
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Book: Professional HTML5 Mobile Game Developmen section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Display Modes
  #1 (permalink)  
Old June 4th, 2013, 06:57 PM
Registered User
Points: 20, Level: 1
Points: 20, Level: 1 Points: 20, Level: 1 Points: 20, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2013
Posts: 2
Thanks: 0
Thanked 2 Times in 2 Posts
Default 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?

Last edited by ragnarok; June 4th, 2013 at 07:00 PM.
The Following User Says Thank You to ragnarok For This Useful Post:
sauerkraut (June 5th, 2013)
  #2 (permalink)  
Old June 4th, 2013, 09:42 PM
Wrox Author
Points: 6, Level: 1
Points: 6, Level: 1 Points: 6, Level: 1 Points: 6, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2012
Posts: 2
Thanks: 0
Thanked 1 Time in 1 Post
Default

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.
The Following User Says Thank You to pascalrettig For This Useful Post:
sauerkraut (June 5th, 2013)
  #3 (permalink)  
Old June 5th, 2013, 02:16 PM
Registered User
Points: 20, Level: 1
Points: 20, Level: 1 Points: 20, Level: 1 Points: 20, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2013
Posts: 2
Thanks: 0
Thanked 2 Times in 2 Posts
Default

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);
  };
The Following User Says Thank You to ragnarok For This Useful Post:
sauerkraut (June 5th, 2013)
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off



All times are GMT -4. The time now is 06:01 AM.


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