3
\$\begingroup\$

I have been experimenting with HTML5/JS, trying to create a simple game when I hit a wall. My choice of game loop is too choppy to be actually of any use in a game.

I'm trying for a fixed time step loop, rendering only when required. I simply use a requestAnimationFrame to run Game.update which finds the elapsed time since the last update, and calls State.update to update and render the current state.

State.prototype.update = function(ms) {
    this.ticks += ms;

    var updates = 0;
    while(this.ticks >= State.DELTA_TIME && updates < State.MAX_UPDATES) {
          this.updateState();

          this.updateFrameTicks += State.DELTA_TIME;
          this.updateFrames++;

          if(this.updateFrameTicks >= 1000) {
              this.ups = this.updateFrames;
              this.updateFrames = 0;
              this.updateFrameTicks -= 1000;
          }

          this.ticks -= State.DELTA_TIME;
          updates++;
    }   

    if(updates > 0) {
          this.renderFrameTicks += updates*State.DELTA_TIME;
          this.renderFrames++;

          if(this.renderFrameTicks >= 1000) {
              this.rps = this.renderFrames;
              this.renderFrames = 0;
              this.renderFrameTicks -= 1000;
          }

          this.renderState(updates*State.DELTA_TIME);
    }

};

But this strategy does not work very well. This is the result: http://jsbin.com/ukosuc/25 (Edit).

As it is apparent, the 'game' has fits of lag, and when you tab out for a long period and come back, the 'game' behaves unexpectedly - updates faster than intended. (EDIT) Thanks to dreta and Vincent Piel, I was able to fix the issue with tabbing out and finding the game to be updating very fast. The problem with the whole thing constantly stuttering and being choppy still persists.

This is either a problem due to something about game loops that I don't quite understand yet, or a problem due to implementation which I can't pinpoint. I haven't been able to solve this problem despite attempting several variations using setTimeout and requestAnimationFrame. (One such example is http://jsbin.com/eyarod/1/edit).

Some help and insight would really be appreciated!

\$\endgroup\$
8
  • 2
    \$\begingroup\$ while i could spend an hour trying to figure out what your code does, the simple fact remains that it's just weird and illogical, here are articles on game loops koonsolo.com/news/dewitters-gameloop gafferongames.com/game-physics/fix-your-timestep \$\endgroup\$
    – dreta
    Dec 13, 2012 at 17:05
  • 1
    \$\begingroup\$ as for the game speeding up, it will because when you alt tab the timer is still going but the requestAnimationFrame is not called, this means that the next time requestAnimationFrame gets called the time delta is massive and your code is desperately trying to catch up, you have to account for that, but only after you understand and implement a good game loop \$\endgroup\$
    – dreta
    Dec 13, 2012 at 17:08
  • \$\begingroup\$ @dreta I have read both these articles, and my implementation was derived from gafferongames' fixed time-step loop. Instead of interpolation, I simply render the state to match the amount of ticks for which it has been updated. But your comment has given me something to think of - getting rid of that chunk of time after tabbing out. Thanks. \$\endgroup\$
    – Rikonator
    Dec 13, 2012 at 17:30
  • 1
    \$\begingroup\$ well, to be honest, i didn't read all your code, but i'm sure you can do all that much more simply. First thing is that after the player went on another tab, he(she) doesn't expect the game to keep on running (-> player death), but rather to pause (and pause music/sound also), so when the player comes back the game should be just ONE frame later. ( if actualFrameTime > 2*typicalFrameTime actualFrameTime=typicalFrameTime ) \$\endgroup\$ Dec 13, 2012 at 20:24
  • 1
    \$\begingroup\$ I am not seeing any stuttering. When I look at your prototype, the UPS is always 60, and the FPS floats between 58 and 59. I'm using Firefox 17 on Windows 7 64-bit. \$\endgroup\$
    – tugs
    Dec 13, 2012 at 22:07

2 Answers 2

1
\$\begingroup\$

You should use window.RequestAnimationFrame to manage your game rendering when making games in HTML5.

Here are some good blogs that explain the issue.

http://creativejs.com/resources/requestanimationframe/ http://www.playmycode.com/blog/2011/08/building-a-game-mainloop-in-javascript/

\$\endgroup\$
0
\$\begingroup\$

You really don't need the delta time pattern while developing 2D games. It's just a waste of CPU and floating points. You don't have such thing as a half pixel, right?

So you can just set any fixed frame rate that works for you and forget about delta time on your animations.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .