[SOLVED] Continue Animation on tabs change also

Hi I am making a third person game , so I need to keep it running like a video , but I observed that my animations(more like my tween movements with which I move the entity) stop when I change tabs , is there any way I can keep it running in the background like even when a person switches tabs or windows?

Hi @Harsh_Zota,

I think what has been said in this thread holds true for what you are asking here:

To sum up, you can’t do that without messing with the PlayCanvas engine. PlayCanvas will update the component, rendering, animation etc systems on each browser animation frame update. Which will pause as soon as the tab becomes inactive.

You could potentially override the following pc.Application class to update on a setInterval instead of requestAnimationFrame, as we discussed on the other thread, but beware potentially that will not work as expected depending on how the browser behaves.

so should I append this pc.Application script to my root?

No, it’s not that simple, you will have to either modify the PlayCanvas engine and build from source, or attempt to patch the pc.Application class.

Both are advanced actions and I wouldn’t go that way normally, since it won’t fully work (the browser throttles setTimeout and setInterval).

Why would you like to keep animations running when the tab is inactive?

As I mentioned above, I am making a third person game, so irrespective if a player is there or not , or even after him joining the game , if he switches tabs or minimizes them I need the game to keep on running , I am working on card games like poker , so as per values from Api’s I am triggering the animation.
Now what is happening is that
Let us say in poker we are dealing the player hand cards, player has joined the game when no cards have been dealt, but after 1 card of player 1 is dealt he switches tabs or minimizes them and returns when the second card of third player(assume there are 3 players) is being dealt , so what happens is the animation of the second card of third player only, it skips the animation of both card of second player and first card of first player, it does not show the cards only ,but when I trigger animation to exit cards , it exits all the cards from where it is supposed to.

So to this problem I though what if I could run animations in background, if I can do that I will not face any such problems.
If there is any alternate way I can see all these animations and cards , please suggest.

Also I have added you to my project so you can see it. If you go through my project and after launching if you switch tabs you will see what I am saying exactly.
Hoping to find a solution

I see, but your main problem is the way browsers handle inactive tabs. They can’t guarantee that your animations will continue playing at the same speed (if playing at all) even if you use the hack I am talking about (setInterval).

I think the proper solution here is to handle your game logic as states, so each time the tab becomes active again you sync the current state of your game and fast forward any animations that were required to be played. The moment the tab becomes active request the latest game state from your server and update the local client to that.

1 Like

How do I check if my tabs have become active or inactive?

You can use the browser page visibility API:

1 Like

This seems to be helpful but it seems only to work on chrome and not firefox

Compatibility says it should work on Firefox

Yes even I saw that but I use firefox only and It did not seem to work.
Let’s see I shall implement this in my project

Hi @Harsh_Zota! I’ve pointed this out before, but there is a difference between a tween and animation. You can use a tween to create an animation, but it’s still a tween. Your questions and the answers to them can therefore become confusing and incorrect.

Is window.onblur and window.onfocus an option for this?

I resolved my problems with your help, instead of detecting window blur or focused , I never paused my animation hence on tab change or minimizing , my animation never stops