How to force redraw a frame

Let's imagine that we have launched a single-player game, if the user switches another browser tab, and then returns to the tab with the game then he will see exactly the same picture as was at the time when he left the tab. because requestAnimationFrame will not refresh the canvas if the tab is closed.

And now if you imagine a multiplayer game-this situation will be terrible!

Even if it is not a PvP game, but simply showing the movement of another player.

Or for example , it is a space simulator and the player's ship flies in space - it must fly, even if the tab is closed, and not immediately draw the jump the entire animation at the time of activating the tab.

I assume that here you can use sockets from the server and for example once a second run on the client wade function.forceRedraw - but the question is-will the frame be redrawn if the tab is not active?

1 Comment


I know what you mean, and we cannot really force a browser to execute requestAnimationFrame on background tabs - by design, like you said most browsers will try to save power when idle, and will stop requestAnimationFrame from triggering in the background.

However setTimeout and setInterval will work even on background tabs, although with a reduced frequency. I cannot find a reference to it now, but I remember reading that they must be executed at least once per second.

So if you use setTimeout or setInterval, or you have your own events triggered by websocket messages and whatnot, then you can call wade.draw() which will immediately draw your scene, even in a background tab.

Note that this is different to wade.forceRedraw() which simply tells wade to ignore any quad-tree based optimizations and do a full redraw (for a single layer or for the whole scene) the next time the scene is renderered - and that does not happen while the tab is not active.

Post a reply
Add Attachment
Submit Reply
Login to Reply