Prevent game stopping on tab switch

[kurhlaa]

Hello,

It seems, that if I switch browser's tab while game is running - the world stops completely. If I start jumping, then switch tab and wait for some time, then switch back - I'm still in the air and continue to fall down. Bullets also freeze in the air.

I try to add this to the create() function, but there is no effect:

var game = this.sys.game;

game.events.off('hidden', game.onHidden, game);
game.events.off('visible', game.onVisible, game);

 

What can I do to prevent stopping of the physics loop? I could live with missing animations, sounds and things like that, but physics should continue to run and change bodies positions. What can I do?

[rich]

There’s nothing you can do. The browser halts Phaser, it doesn’t do it itself.

You ought to pause the game fully if they switch tab and resume when they come back. If this is an IO game and you want it to not pause then you’ll have to work out for yourself how to pause and resume in a seamless way, because the browser is going to halt phaser regardless.

[syratechnologies]

	
	window.addEventListener("message", function(event)
	{
		var sub = 0;
		if(event.data == "tick"){
			if(window.lafcb)
				if((new Date().getTime()/1000) - window.lafcb.started > 0.5){
					window.lafcb.func(new Date().getTime()+16)
					window.lafcb = null;
				}
			var i = window.timeouts.length;
			while (i--) {
				if(window.timeouts[i].ran){
					window.timeouts.splice(i,1);
				}
			}
			var i = window.timeouts.length;
			while (i--) {
				if(new Date().getTime() - window.timeouts[i].started >= window.timeouts[i].delay && window.timeouts[i]){
					window.timeouts[i].func();
					window.timeouts[i].ran = true;
				}
			}
			for(var i in window.intervals){
				var currTime = new Date().getTime();
				if(currTime - window.intervals[i].last >= window.intervals[i].delay && window.intervals[i]){
					window.intervals[i].last = currTime;
					window.intervals[i].func();
				}
			}
			window.postMessage('tick', '*');
		}
	}, false);
	(function(context) {
	  'use strict';
		window.lafcb = null;
		context.timeouts = [];
		context.intervals = [];
		var lastTime = new Date().getTime();
		context.old = {};
		
		old.setTimeout = (i,ii)=> context.setTimeout(i,ii);
		old.setInterval = (i,ii) =>context.setInterval(i,ii);
		old.clearTimeout = (i) =>context.clearTimeout(i);
		old.clearInterval = (i) =>context.clearInterval(i);
		if(typeof(context.postMessage) == 'function'){
			context.setTimeout = function(fn, millis) {
				var id = timeouts.length 
				timeouts[id] = {id: id,func: fn, delay: millis,started: new Date().getTime()};
				return id;
			};
			context.clearTimeout = function(cancel) {
				for(var i in timeouts){
					if(timeouts[i].id == cancel){
						timeouts.splice(i,1);
						break;
					}
				}
			};
			context.setInterval = function(fn, delay ) {
				intervals[intervals.length] = {func: fn, delay: delay,last: new Date().getTime()};
				return intervals[intervals.length-1];
			};
			context.clearInterval = function(cancel) {
				for(var i in intervals){
					if(intervals[i] == cancel){
						intervals.splice(i,1);
						break;
					}
				}
			};
		}
		
		context.requestAnimationFrame = function( callback, element ) {
			lafcb = {started: new Date().getTime()/1000,func: callback};
			var currTime = new Date().getTime();
			var timeToCall = 16;
			var id = context.setTimeout( function() {
				callback( currTime+timeToCall);
			}, timeToCall );
			return id;
		};
		context.cancelAnimationFrame = function( id ) {
			lafcb 
			context.clearTimeout( id );
		};
		context.addEventListener("load",function(){
			if(typeof(context.postMessage) == 'function'){
				context.postMessage('tick', '*');
			}else{
				context.setTimeout = old.setTimeout
				context.setInterval = old.setInterval
				context.clearTimeout = old.clearTimeout
				context.clearInterval = old.clearInterval
				alert("Your browser does not support postMessage. Sorry but you will be forced to default to the standard setInterval and setTimeout functions. This means you may experience pauses in your game when you navigate away from the tab it is playing in.");
			}
		});
	})(this);
	
	

This polyfill prevents the browser from pausing the javascript execution.

[All-Scripts]

with the Phaser 2 there gives the option:

this.stage.disableVisibilityChange = true;

in the init before create. in Phaser 3 i allready search a solucion the code syratechnologies works but i have very big performance problem with this the game lags.

 

[Airapport]

I figured out a simple workaround.

Let's say your game has standard update(t, dt) function.

Create an additional function called awayUpdate() and call it via setInterval every 10 seconds.

Add variables to your game named lastUpdateMoment = 0 and forcedUpdateMoment = 0, and a flag isRunningUpdateFirstTime = true

 

Your update function will look like:

update(t, dt){

    this.lastUpdateMoment = t;
	if (this.isWaiting4ActualUpdateEvent){
            this.forcedUpdateMoment = this.lastUpdateMoment;
            this.isWaiting4ActualUpdateEvent = false;
        }
    //then your regular game code
}

And your awayUpdate looks like this:

awayUpdate(){
    if (this.lastUpdateMoment>this.forcedUpdateMoment+5000){
            this.forcedUpdateMoment = this.lastUpdateMoment
	}else{
            this.update(this.forcedUpdateMoment+10000, 10000)
            this.forcedUpdateMoment = this.lastUpdateMoment;
         }
}

So, if update is not fired, the check in awayUpdate will still launch update function.