2
\$\begingroup\$

I am writing a multiplay browser based game and am running into an issue with playtesting simple interactions. When a browser window loses focus is stops running requestAnimationFrame calls. This effectively pauses the state all visuals when focus is lost.

I would like to have two instances of the game running at the same time. I could playtest in one window and observe how a thirdparty would see those actions in another window.

Right now I am only able to toggle between the two windows and see teleportation like behavior as the client state catches up to the new server state.

I am not sure how, without setting up a second computer, I might test this. Anyone have any experience with this or any advice?

\$\endgroup\$
5
  • 1
    \$\begingroup\$ VirtualBox? I'm not sure about browser games, however for multiplayer in general it is a good idea to test that it does not only works in lo. And there is always GNS3 for the pesky NAT hole punching, however you probably do not have to worry about that. \$\endgroup\$
    – Theraot
    Commented Sep 14, 2019 at 17:47
  • 1
    \$\begingroup\$ I havent worked with it, but have you tried to use setTimeout instead of requestAnimationFrame? \$\endgroup\$
    – Vaillancourt ♦
    Commented Sep 14, 2019 at 23:40
  • \$\begingroup\$ @Theraot Working on setting up VirtualBox to see if that will work. \$\endgroup\$
    – stats
    Commented Sep 15, 2019 at 1:45
  • \$\begingroup\$ @AlexandreVaillancourt I am using Phaser-CE for the engine, which makes it more effort than it is worth to switch out the engines. \$\endgroup\$
    – stats
    Commented Sep 15, 2019 at 1:47
  • \$\begingroup\$ Might want to add that requirent to the question... \$\endgroup\$
    – Vaillancourt ♦
    Commented Sep 15, 2019 at 10:21

3 Answers 3

Reset to default
2
\$\begingroup\$

By default, requestAnimationFrame does not pause when switching window focus. Your game engine is probably adding this behavior for you. Check the documentation for your game engine, you can probably just turn this behavior off.

As proof, try opening two browser windows, both visible, and run a simple rAF based animation in both. You’ll see both animations update.

\$\endgroup\$
1
  • \$\begingroup\$ You are correct. Phaser has a flag to disable this behaviour. this.g.stage.disableVisibilityChange = true; \$\endgroup\$
    – stats
    Commented Sep 16, 2019 at 16:36
2
\$\begingroup\$

As schteppe point out, requestAnimationFrame does not stop when a window loses focus. Thus, try having you may also have to keep the browser windows visible on screen. For example you can split the screen to have two browser windows visible at the same time.

Another thing that worked for me is sending the browser window to another desktop. By the way, the visibility API is unaware of the current desktop.

Note that the game engine can still detect a loss of focus (Focus/Blur demo), and it can overwrie window.requestAnimationFrame.

I do not know if the game engine you are using add focus/blur events, much less if it is viable to remove them.

I also played with chromium flags (about:flags), Stop non-timer task queues background in particular seemed promising. Also tested Throttle expensive background timers. However, when a window is minimized or the page is not on the current tab, requestAnimationFrame does not trigger regardless of these flags.

\$\endgroup\$
0
\$\begingroup\$

As per the comment posted by Theraot above: VirtualBox is a solution that allows you to playtest on one screen and see the results in another browser like a third party would.

VirtualBox will maintain browser focus even when the virtual machine is not in focus.

I was able to use VirtualBox with an Ubuntu image and installed Chrome to test. It took me a few hours to get the VirtualBox environment setup.

I do not think this is an optimal solution, but it works.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .