1

I'm developing a browser based game with haxe. As long as I have the browser tab as my active tab, everything works just as intended and smoothly, but as soon as i switch the tab (regardless if i'm using chrome or firefox) it stops working completly and doesn't send any heartbeat at all to my server.

I'm aware, that inactive tabs are slowed down in perfomance and i'm also aware, that inactive tabs are not allowed to load ressources. (My game does not do that).

I want my game to continue while it is inactive and more importantly, I want it to send a heartbeat to the server.

Is there any way I can enforce this?

I'm using Kha and Haxe, i tried the haxe native scheduler for the heartbeat and the kha scheduler, both of them don't work while beeing inactive.

Rafael Kress
  • 41
  • 5
  • Okay, i tried a heartbeat with untyped __js__("setTimeout")(heartbeat, 1250); which worked. this command line works as intended even in an inactive tab – Rafael Kress Sep 01 '17 at 12:25
  • Update: Okay, now i've figured it out: the haxe.delay or the kha.scheduler calls a timestamp which only calls "setTimeout" if requestanimationframe is null, which it doesn't seem to be, just not active – Rafael Kress Sep 01 '17 at 12:55

2 Answers2

2

You already found it, but I think window.Top should be window.top.

Such thing would give an error if you would not have used :Dynamic. Window is a typed object and you get nice errors, which is a one of the good things of a a strict typed language. requestAnimationFrame is a global function on window, so this snippet works without a dynamic annotation.

var window = Browser.window;
if (window.requestAnimationFrame == null || window.top != window.self) window.setTimeout(animate, 1000.0 / 60.0);
else window.requestAnimationFrame(animate);

You also mention that checking window.top != window.self checks if the window is active. This is not true, it checks if the window runs in a (i)frame. Also, you only use this check once (and only when requestAnimationFrame isnt supported, so if it isn't true the first time, you will never get updates.

You could use the !Browser.document.hidden property, which is supported very well https://caniuse.com/#search=hidden 

var window = Browser.window;
if (window.requestAnimationFrame == null) window.setTimeout(animate, 1000.0 / 60.0);
else window.requestAnimationFrame(animate);

I would suggest to use this snippet. And use if (Browser.document.hidden) return in the animate function

Mark Knol
  • 9,663
  • 3
  • 29
  • 44
  • Thanks for the Explanation :), i tried to change as little as possible from the source, since it's not my library (it's kha), so i tried to stick as much as possible to the original code – Rafael Kress Sep 04 '17 at 09:21
  • Somehow i can't edit my comment: The condition is checked every frame/tick. to be more precise: function animate(timestamp) { var window = Browser.window; if (requestAnimationFrame == null || || window.top != window.self) window.setTimeout(animate, 1000.0 / 60.0); else requestAnimationFrame(animate); ... } Thats the function inside the kha library – Rafael Kress Sep 04 '17 at 09:35
  • I've tested this solution, but unfortunately it doesn't work. First of all, it seems that a hidden document is somethin different than a unfocused one. Second, i've had to include that setTimeout is called when the window gets inactive, even if the animate function is already in the queue of requestAnimationFrame – Rafael Kress Sep 04 '17 at 12:58
1

Okay, I found the solution. The SystemImpl from kha is requesting the requestAnimationFrame and checks if it is null every timestamp.

var window: Dynamic = Browser.window;    
if (requestAnimationFrame == null) window.setTimeout(animate, 1000.0 / 60.0);
else requestAnimationFrame(animate);

During inactive tab, the requestAnimationFrame isn't null, but doesn't call the animate function. I've added a static bool value isFocused, which is changed everytime the browser closes or opens this window.

To fix this i temporarely modified this small snippet into:

var window = Browser.window;
window.onfocus = function(){isFocused = true;}
window.onblur = function()
{
    window.setTimeout(animate, 1000.0 / 60.0); 
    isFocused = false; 
}           
if (requestAnimationFrame == null || !isFocused) window.setTimeout(animate, 1000.0 / 60.0);
else requestAnimationFrame(animate);

This way I'm checking if the current window is the active window and use the much smoother requestAnimationFrame and if not I'm using setTimeout. The callback methods are setting the is focused value. The Blur Callback value also makes sure, that the animate function is always called while blurred.

I'm going to present this solution in the upcoming 1 or 2 weeks to rob, maybe he considers the implementation

Rafael Kress
  • 41
  • 5