kurhlaa

Prevent game stopping on tab switch

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
	
	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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.