How to convert setInterval to requestAnimationFrame

Question

There is a stackoverflow post by a guy called Gustavo Carvalho that shows how camera/viewport works in a HTML5 game.

All's good except that setInterval is used instead of requestAnimationFrame.

I tried converting to requestAnimationFrame without success :-(

Can somebody pls help? Here's the post:

Simple HTML5 game camera/viewport

Thanks very much!

EDIT: After reviewing the answers below, I came up with this solution:

REPLACE THE FOLLOWING CODE...

 // Game Loop
    var gameLoop = function(){                      

        update();
        draw();
    }   

    // <-- configure play/pause capabilities:



    var runningId = -1;

    Game.play = function(){

        if(runningId == -1){


                //Use setInterval instead of requestAnimationFrame for compatibility reason
            runningId = setInterval(function(){
                gameLoop();
            }, INTERVAL);



            console.log("play");

        }

    }

    Game.togglePause = function(){      
        if(runningId == -1){
            Game.play();
        }
        else
        {
            clearInterval(runningId);
            runningId = -1;
            console.log("paused");
        }
    }   

    // -->

REPLACE WITH THIS ONE...

// Game Loop
    var gameLoop = function(){                      

        if(gameStatus == 'play'){

            update();
                draw();

        }

        window.requestAnimationFrame(gameLoop);

    }   


    var gameStatus = 'play';

    Game.play = function() {

        gameLoop();

    }




    Game.togglePause = function() {

        if(gameStatus == 'play'){

            gameStatus = 'pause';

            console.log(gameStatus);
        }
        else if(gameStatus == 'pause'){

            gameStatus = 'play';

            console.log(gameStatus);

        }



    }

try this example. http://sathyamoorthi10.blogspot.in/2012/04/html5-requestanimationframe-example.html — user10, Oct 11 '13 at 07:09
@dystroy, I link to the code instead of pasting is because there is useful explanation in that post which would be lost if I just paste the code here/ Moreover, there's a lot of code. — , Oct 11 '13 at 09:21
@HoneyBadger That's not how you should ask on SO. See [this](http://stackoverflow.com/help/on-topic) and [this](http://sscce.org/). — Denys Séguret, Oct 11 '13 at 09:23

score 1 · Answer 1 · answered Oct 11 '13 at 07:23

1

You can modify the following parts of the code to:

/// add a flag as condition for loop
var isPlaying = true;

// Game Loop
function gameLoop(){                      
    update();
    draw();

    /// incorporate loop here
    if (isPlaying)
        requstAnimationFrame(gameLoop);
}

And then:

Game.play = function(){ 
    if (!isPlaying){
        isPlaying = true;    /// enable looping
        gameLoop();          /// start loop
        console.log("play");
    }
}

Game.togglePause = function(){      
    if(!isPlaying){
        Game.play();
    }
    else
    {
        isPlaying = false;   /// this will terminate loop
        console.log("paused");
    }
}

Note that for latest versions of Firefox and Chrome the requestAnimationFrame is now unprefixed. For older and other browsers you might need to use a polyfill.

answered Oct 11 '13 at 07:23

Thanks Ken. What is FPS? – Oct 11 '13 at 09:08
Sorry, I mean what is the FPS? Thanks! – Oct 11 '13 at 09:14
2

@HoneyBadger ah.. :) for rAF FPS is optimally 60 FPS but there is no guarantee for this as it depends on the actual code and system (if on battery you might get 30 FPS, if code is expensive and use more time to execute than a frame and so on). – Oct 11 '13 at 09:16
@JanDvorak what are you talking about? The **complete** example I made is in body, no link at all. The only link is for a polyfill not relevant to example itself. Did I miss something?? – Oct 11 '13 at 09:27
1

well, I'm not talking about the answer body, but about the question body. You should vote to close, not answer. – John Dvorak Oct 11 '13 at 09:29
2

@JanDvorak: IMHO, this question is not off-topic & should not have been closed. In the specific relm of Html Canvas programming: setInterval and requestAnimationFrame (and setTimeout) fall within SO’s askable topics as “software tools commonly used by programmers”—Important Tools!. Further, these tools are in transition as the older setInterval/setTimeout are replaced by rAF for very valid reasons. As we speak, browser makers are evolving these tools, so questions like this help programmers evolve also. Rant: Not every SO question without code should be closed! – markE Oct 11 '13 at 16:16
2

+1 @Ken-AbdiasSoftware: As you can see from my comment (rant?) above, I appreciate Honey Badgers question and I appreciate your answer – markE Oct 11 '13 at 16:16
2

Thanks @markE, appreciated! I would also like to point out (to the other commenter) that there is the option of [editing questions and answers yourselves](http://stackoverflow.com/help/privileges/edit) you feel do not meet the SO requirements. I think this would be more helpful and constructive (at least if one is to become a hot-head about it...) than down-voting and closing as a first step, in particular for new/inexperienced users. – Oct 11 '13 at 21:01

score 1 · Answer 2 · answered Oct 11 '13 at 07:39

The call to requestAnimationFrame function has to actually provide loop in its first argument, that happens to be a function. So roughly speaking, do something like this:

    function draw() {
      // some drawing on a canvas happens here
    }

    function game_loop() {
      var callback = function(t) {
        draw();
        // loop the whole thing:)
        game_loop();
      };
      window.requestAnimationFrame(callback);
    }

Very quick example: http://jsfiddle.net/23PCv/2/ – Stanislav Oct 11 '13 at 07:49 — Stanislav, Oct 11 '13 at 07:49

How to convert setInterval to requestAnimationFrame

2 Answers2