Prevent game pause

[asd42]

hi,

i'm working on a multiplayer game. 

when the window lose focus, the event onhidden starts and the game pauses. 

How can i avoid this? i don't want to pause the game.. It must always continue the computations

[rich]

You can’t. The game doesn’t pause, it’s the browser that pauses because the tab is inactive. It also happens if you open another app like notepad and drag it so that it covers up the browser. It knows you can’t see it, so it throttles processing down to the absolute minimum needed. Browsers have done this for a while now as it saves battery life on non desktops.

[asd42]

10 hours ago, rich said:

You can’t. The game doesn’t pause, it’s the browser that pauses because the tab is inactive. It also happens if you open another app like notepad and drag it so that it covers up the browser. It knows you can’t see it, so it throttles processing down to the absolute minimum needed. Browsers have done this for a while now as it saves battery life on non desktops.

thanks for the reply,

so it is a real mess making an mmo because i should handle a massive amount of data lost during the pause state in the resume event..

[strivinglife]

Wouldn't you want to handle most of the computations on the server anyway?

Once the client reconnects they would get sent the current state of the world.

[asd42]

On 5/19/2018 at 12:53 AM, strivinglife said:

Wouldn't you want to handle most of the computations on the server anyway?

Once the client reconnects they would get sent the current state of the world.

yeah i already do it, but it is quite expensive for a large amount of data..
anyway it's not the biggest problem for such a game, for example it is easily hackerable by intercepting the rpc calls from the server and by modifying the scripts in the client.
 

[phaserlover]

On 5/21/2018 at 5:22 PM, asd42 said:

yeah i already do it, but it is quite expensive for a large amount of data..
anyway it's not the biggest problem for such a game, for example it is easily hackerable by intercepting the rpc calls from the server and by modifying the scripts in the client.
 

You probably want server side validation...

[syratechnologies]

Per the documentation, Chrome does not call requestAnimationFrame() when a page is in the background. This behavior has been in place since 2011. 

Include this polyfill to allow requestAnimationFrame to run while the tab is not active

	window.addEventListener("message", function(event)
	{
		
		if(event.data == "tick"){
			for(var i in window.timeouts){
				if(new Date().getTime() - window.timeouts[i].started >= window.timeouts[i].delay && window.timeouts[i]){
					window.timeouts[i].func();
					delete window.timeouts[i];
				}
			}
			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';
		context.timeouts = [];
		context.intervals = [];
		var lastTime = new Date().getTime();
		var old = {};
		old.setTimeout = context.setTimeout;
		old.setInterval = context.setInterval;
		old.clearTimeout = context.clearTimeout;
		old.clearInterval = context.clearInterval;
		if(typeof(context.postMessage) == 'function'){
			context.setTimeout = function(fn, millis) {
				var timeout = {func: fn, delay: millis,started: new Date().getTime()};
				var l = timeouts.length;
				timeouts[l] = timeout;
				return l;
			};
			context.clearTimeout = function(cancel) {
				for(var i in timeouts){
					if(timeouts[i] == cancel)
						timeouts.splice(cancel,1);
				}
			};
			context.setInterval = function(fn, delay ) {
				var interval = {func: fn, delay: delay,last: new Date().getTime()};
				var l = intervals.length;
				intervals[l] = interval;
				return interval;
			};
			context.clearInterval = function(cancel) {
				for(var i in intervals){
					if(intervals[i] == cancel)
						timeouts.splice(cancel,1);
				}
			};
		}
		context.requestAnimationFrame = function( callback, element ) {
			var currTime = new Date().getTime();
			var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
			var id = context.setTimeout( function() {
				callback( currTime + timeToCall );
			}, timeToCall );
			lastTime = currTime + timeToCall;
			return id;
		};
		context.cancelAnimationFrame = function( id ) {
			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);

        

Next step
We must make the tab into a foreground process. To do so we will run a looping white noise file.

There are a number of automatic exemptions from this throttling:
Applications playing audio are considered foreground and aren’t throttled (I use white noise turned down to where I can't hear it). 
http://script-it.net/assets/noise.ogg

    <audio controls loop autoplay>
        <source src="/assets/noise.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>

Lastly we override events inside of our preload function

    function preload(){
        this.game.registry.events._events.blur = [];
        this.game.registry.events._events.focus = [];
        this.game.registry.events._events.hidden = [];
        this.game.onBlur                        = ()=>noop("blur");
        this.game.onFocus                       = ()=>noop("focus");
        this.game.onPause                       = ()=>noop("pause");
        this.focusLoss                     = ()=>noop("focusloss");
        this.focusGain                     = ()=>noop("focusgain");
    }