Make HTML5 game update when tab is not active

Currently (using cocos2d-js 3.3) my game seems to pause entirely when I switch to a new tab (on chrome). Is there a way to keep it running even when the tab is not active?

No ideas? This is pretty critical to my game. At least, are there event listeners that tell me when a user changes to a different tab and comes back to the current game?

Cocos2d js 3.3 relies on RAF (requestAnimationFrame) for animation loop. This function is very gentle with animation, consumes the least resources possible, but the drawback (or super feature, depending how you see it) is that when switching a tab, the RAF does not fire.

If you want to have your game running while in other tabs, like a RTS or multiplayer game that needs to be connected continuously, you must switch to seTimeout/setInterval loop control instead. Don’t know whether the engine has a flag for this (the WIP V4 does), but it is the only way.

Hope that helps.

As Ibon said, if you want to change to setTimeout loop, you can set your frame rate other than 60, then Cocos2d-JS will work under setTimeout loop.

Thanks for the help, but unfortunately that’s not true. Setting it to 30 hz / 144hz, chrome still pauses the tab when I switch to another tab. Is that chrome specific behavior? Can I do anything about it?

@slackmoehrle

Hi, is there any solution or workaround to make game work in inactive browser tab?

Hey energy, just got notified by your response via email. Eventually we worked around the problem by using web workers. When you start a web worker and use setTimeout or setInterval in that worker, it doesn’t stop ticking when you switch tabs like requestAnimationFrame. So we use a worker that does setInterval which itsel triggers an event, which our ‘main thread’ listens to, which itself calls our actual game update loop. It’s done this way because you can’t interact with your main thread objects from web workers. Cocos2d regular updates just do all the rendering.

1 Like

Thanks for getting back on reply. Will check about web worker.

Honestly, I am not sure. If you need me to, I can ask one of our team members to look at your question. @think1st mentioned a possible solution. I am not sure if this works or not.

@think1st

Can u share some example with what you said??

@energyy

Did u get any solution for this??

noup, we just living with that ;( tab freeze

:disappointed:

Thank you for replying

Hi there. If you guys having this problem where the game/canvas is paused when switching on to another tab, i got a solution (which was working for me).

I am using cocos2d js 3.10, and the first thing you need to do is change your frameRate in your project.json to other than 60 (mine is 59). And then, go to your cocos2d-js-v3.10.js file (or whatever version you’re using), find this line of code here :

cc.eventManager.addCustomListener(cc.game.EVENT_HIDE, function () {
cc.game.pause();
});
cc.eventManager.addCustomListener(cc.game.EVENT_SHOW, function () {
cc.game.resume();
});

and then turn it into comments or delete them if you want. And that’s it, hope it’s working for you guys.