Game loop requestAnimFrame (javascript / canvas)

Question

I'm struggling with this and can't seem to find much reference to go on.

I am using the requestAnimFrame that was written up by Google:

requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
     window.webkitRequestAnimationFrame ||
     window.mozRequestAnimationFrame ||
     window.oRequestAnimationFrame ||
     window.msRequestAnimationFrame ||
     function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
       window.setTimeout(callback, 1000/60);
     };
})();

I have a function "init" which sets up my game. That then calls update which is the game loop which calls render to draw to canvas. If you ignore requestAnimFrame - each individual part works fine. Once I place a call to requestAnimFrame in though, I either get "too much recursion" error or FF just crashes.

My code in update() is as follows:

game.update = function()
{
    stats.update();
    fps.innerHTML = stats.getFPS();

// Render objects
game.render();
// Continue game loop
requestAnimFrame(game.update());
}

stats.update just updates the FPS counter. So you can see, this function doesn't do a lot. My game.render function just draws a load of tiles onto the canvas and that works fine.

Any suggestions?

Thanks!

Chris

icktoofay · Accepted Answer · 2011-05-03 01:13:50Z

22

You need to pass in the function, rather than the result of calling the function. In other words, change this:

requestAnimFrame(game.update());

To this:

requestAnimFrame(game.update);

The way it is currently will go into game.update, do its thing, and then try to evaluate the expression:

requestAnimFrame(game.update())

In order to evaluate that, it first needs to evaluate the argument to requestAnimFrame:

game.update()

That's just a function call back to itself, leading to infinite recursion until a stack overflow/too much recursion error. It never gets to call requestAnimFrame because it's always evaluating the inner argument.

answered May 3, 2011 at 1:13

icktoofay

130k23 gold badges261 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Evans Over a year ago

Argh! Something so simple but works perfectly now. Guess I need to do some more reading on javascript! Thanks. :)

Collectives™ on Stack Overflow

Game loop requestAnimFrame (javascript / canvas)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related