Remaining the same speed when switch to another tab

[Herbert]

Hi guys,

Recently I intend to keep my game running at the approximately same speed while the player switch to another tab,

it means I need to keep my movieClip(animatedSprite) and Tween object(I am using GreenSock) running while losing tab focus,

since RAF will stop, I use setInterval to keep updating PIXI.ticker.shared.

const ticker = PIXI.ticker.shared;
setInterval(() => {
   ticker.update();
}, 20);

However, setInterval's minimum is limited to around 1000ms when the tab focus is blur, so my movieClip‘s update rate is the same, which is much slower.

Now, i am thinking to record the deltatime and set the movieClip to specific frame accordingly on each update, then have to deal with the callback like onRepeat or onComplete,

Is there a simpler way to achieve this?

[ivan.popelyshev]

According to the code, ticker limits update to 100ms, and you need 1s, right? You can put 2s and 0.5 there if you want:

ticker._maxElapsedMS = 1000

// or this

ticker.minFPS = 1

//its actually the same

[Herbert]

hi ivan.popelyshev,

Sorry I didn't make my question very clear,

what I want is movieClip keep playing when I switch to another tab,

since RAF stop when I lose the tab focus, I use setInterval continuously update ticker to keep movieClip playing,

I hope it updates every 20ms, however, seems like while I lose the tab focus, the setInterval ignore my 20,

It only do it every 1000ms, I believe it's browser's feature to save performance.

so ticker.update is called every second only, which makes the movieClip only change it's frame every second as well. 

 

 

 

[ivan.popelyshev]

Yes, but now it actually calculates what frame is supposed to be playing after 1 second! Before it wasnt able to distinguish between 100ms and 1000ms

[Herbert]

thanks ivan.popelyshev,

it works like magic

[immanuelx2]

Hello, @ivan.popelyshev and @Herbert sorry for the necro but this looks to be exactly the issue I'm trying to tackle here in 2019.

I'm working on a multiplayer game so it is important that my game state (physics calculations) stay in sync with the server.

When the tab loses focus, it is my understanding that:

1. RAF (which is what the Ticker uses) pauses.
2. setInterval() is limited to 1000ms intervals.

So my approach is to use a setInterval() instead of ticker.add() when window is blur and adjust as necessary (using deltaMS from the ticker):

let manualUpdateInterval;

window.onblur = () => {

	ticker.stop();                             // stop the ticker so we can manually update
	ticker.minFPS = 1;                         // correspond to the setInterval limit (1000ms)

	manualUpdateInterval = setInterval(() => {
		ticker.update();
	}, 1000);                                  // capped at this value anyway
}

window.onfocus = () => {

	clearInterval(manualUpdateInterval);      // stop the interval
	ticker.minFPS = 10;                       // reset to default minFPS
	ticker.start();                           // start the ticker back up

}

if (ticker.started) {

	ticker.add(() => {

		update(ticker.deltaMS);           // send deltaMS so physics calculations stay in sync
		draw();

	});
}

When the tab is focus, everything looks right. However when the tab loses focus, my physics calc seems off (I can monitor this by seeing the server update player location in it's logs)... When I switch back to the tab, player is behind.

Is there something I'm missing here? Any help is appreciated.

[ivan.popelyshev]

There's max cap on delta, but in general that kind of tickers can go async in client-server. You need a mechanism for global server time, its inevitable.

[immanuelx2]

Thanks for the reply @ivan.popelyshev I'm not understanding. Can u elaborate?

Shouldn't delta update when ticker.update() is called every ~1000ms?

[ivan.popelyshev]

https://github.com/pixijs/pixi.js/blob/dev/packages/ticker/src/Ticker.js#L38

Ticker is not a ideal theoretical thing, its a class that has downsides and hacks: we can say that "it works" only if that really works for particular case. If it doesnt work for yours - well, find whats wrong and fix it. There're no guarantees.

Not so long ago @themoonrat and someone else tried to fix that for different reason - minFPS/maxFPS props weren't working properly. I didnt even try to understand what did the guys fix.

[dacatchman]

Check out mainloop.js, there's a neat write up on it and constructing better main loops for javascript.  Even has frame interpolation, if that would suit you.  Also has some ways of dealing with lost focus and trimming delta time based on being tabbed out.
 

setInterval for a gameloop is not ideal.  Either case tabs and lost focus are part of our life in the html5 scene, so it's just coping with it best you can, there is no fix; only mitigation