CODEWITHSUNDEEP
javascripthtmlcanvas
ROODAY
ROODAY

Reputation: 832

HTML5 canvas game won't pause rendering when browser is not in focus

My friends and I are making a game, and from some earlier tests, requestAnimationFrame() would make sure that the game would pause when it wasn't in focus. In our current game, here, you can see that it keeps rendering everything even when not in focus. This is what we use to deal with the rendering:

//main game loop, updates and renders the game
var main = function(){
        var now = Date.now();
        var delta = now - then;

        update(delta / 1000);
        render();

        then = now;

        requestAnimationFrame(main);
};

//updates the positions of the target and enemy
var update = function(delta){
        target.update(delta, gamecanvas);
        planet.update(delta);

        enemies.forEach(function(enemy){
                enemy.update(delta, gamecanvas)
        });
        defenders.forEach(function(enemy){
                enemy.update(delta, gamecanvas)
        });
};

//clears the screen
var clearScreen = function(){
        gamectx.clearRect(0,0,gamecanvas.width, gamecanvas.height);
};

//clears the screen, and redraws the objects
var render = function(){
        clearScreen();

        planet.draw(gamectx);
        enemies.forEach(function(enemy){
                enemy.draw(gamectx)
        });
        defenders.forEach(function(enemy){
                enemy.draw(gamectx)
        }); 
        target.draw(gamectx);
};

//updates the time, runs the main loop
var then = Date.now();
main();

Anyone have an idea what's going wrong?

Upvotes: 0

Views: 2374

Answers (1)

GameAlchemist
GameAlchemist

Reputation: 19294

I think you're looking in the wrong direction.

• RequestAnimationFrame does stop triggering when your application is tabbed out.
But the 'real' time keeps on running. So your delta, when Browser resumes, will be huge, most probably making your movements/physic/.... go to dust.

• So first thing : have the delta clamped. In both ways. Say if it's above 50ms, you must have been tabbed out, so consider, say, 16ms elapsed. But for very fast display (like 120Hz, some people have this), a too small delta will drive the computer's fan crazy, so check it against, say 14ms to avoid overheat/fan turning/battery sinking. You might want to handle a 'game time' that would be the time elapsed within your game. 

var gameTime = 0;

var typicalFrame  = 16;
var smallestFrame = 14;
var longestFrame  = 50;

var main = function(){
    var now = Date.now();
    var delta = now - then;
    if (delta<smallestFrame) return;
    if (delta>longestFrame) delta = typicalFrame;
    gameTime += delta;
    then = now;

    ...

• Second thing : Even if the advice above might be enough, in fact you might want to pause the game properly when you loose focus. First example that comes to mind is the music, that you might want to stop (do it ! it's so boring when you don't even know which tab is playing music !!). Second example is a network game where the server will like to know the player isn't playing any more.
This is not that difficult to do : just handle window.onblur and window.onfocus events and do what you think appropriate here to stop your game clock, music, ...

Upvotes: 4

Related Questions