Game Playing in Background

MrZak-dev · March 23, 2021, 6:33pm

I am making a multiplayer card game for Facebook instant Games Platform ,
and i have noticed that when i change the browser tab to another tab my game freezes , unlike other games i’ve seen (the game keeps working even if you minimize/change browser tab )
Example : UNO game (Facebook instant game).

My question is how i can achieve that because , my game is multiplayer turnbased and when the game put in background i cannot keep tracking the player time , i want the game to keeps playing even if it have been set to background .

PS : after looking into other game with playing in background capability it turns out that they are made using LayaBox .

pandamicro · March 24, 2021, 8:22am

You can set the frame rate with something between 30 and 60 (exclude), then we will use setTimeout to simulate the main loop, then it can still be running in background. But don’t rely on it, browsers have total control on it and don’t like JavaScript running in background

MrZak-dev · March 24, 2021, 8:31am

Thank you for you help !
it would be much appreciated if you give me more details ,
I have set the game frame rate to 35 using game.setFrameRate(35); and it is still blocked when i change the browser tab .

in fact i am not sure what did you meant by `

Migguli · March 24, 2021, 2:30pm

Date.now() returns current timestamp. With that, you probably can determine how much time has passed since switching the tab.

One way to run the application even when the browser is closed is to use service workers. I’m betting you would have to implement those by yourself.

Horchynskyi · March 24, 2021, 2:34pm

“when the game put in background i cannot keep tracking the player time”

Maybe you can just track it on backend?

pandamicro · March 24, 2021, 2:34pm

I mean in the setFrameRate of game.ts , we are using requestAnimationFrame or setTimeout

I think it’s not working because we stopped the engine on purpose, see the related logic here

github.com

cocos-creator/engine/blob/develop/cocos/core/game.ts#L919


    }

    if ('onpageshow' in window && 'onpagehide' in window) {
        win.addEventListener('pagehide', onHidden);
        win.addEventListener('pageshow', onShown);
        // Taobao UIWebKit
        document.addEventListener('pagehide', onHidden);
        document.addEventListener('pageshow', onShown);
    }

    this.on(Game.EVENT_HIDE, () => {
        this.pause();
    });
    this.on(Game.EVENT_SHOW, () => {
        this.resume();
    });
}

private _setRenderPipelineNShowSplash () {
    return Promise.resolve(this._setupRenderPipeline()).then(
        () => Promise.resolve(this._showSplashScreen()).then(

You can cancel this behavior by adding another callback

game.on(Game.EVENT_HIDE, () => {
    game.resume();
});

or customize the engine

MrZak-dev · April 21, 2021, 9:23pm

Thanks to @pandamicro , i was able to run the game in the background In WEB , but what about the NATIVE builds , i am willing to launch an android version too , and i couldn’t find a way to do the same as i did in the web version .

Please can you guide me to which part in the native source code i should change to make the game work in background in android too (if that is an option obviously).
Thank you for you support !!!

Ronsku · April 22, 2021, 11:46pm

@pandamicro I’ve noticed also that by default game is paused but for example running Spine animations are NOT paused, which can cause unwanted behaviors. If possible it would be nice to pause third party stuff like spine as well by default