delay rendering if page is inactive

[mamfloo]

So short story i am making my first game a small online rpg and i have this problem if the page is inactive(so the user is not looking at it) the engine does not render what is happening , so for example if some other player moved while you were active in another tab your instance of the game would stop and only start doing what happened when you go to the web tab where the game was opened. to explain better what i mean i uploaded a short Youtube video.

https://www.youtube.com/watch?v=Lp8JHLhhkXU

thanks.

[eonarheim]

Hi @mamfloo! Thanks for posting, the video is a great help! BTW I'd love to hear more about your project!

if the page is inactive(so the user is not looking at it) the engine does not render what is happening

This is by design in the browser to save on power/compute for users (generally this works okay for single player games). But I agree It doesn't make as much sense for your multiplayer case where you want to be in sync regardless of page state.

Excalibur uses requestAnimationFrame to drive it's internal clock and tick frames forward. But I'm pretty sure you'll run into similar problems with setInterval and setTimeout in inactive frames to drive the clock.

Possible solutions

I have a couple workarounds for you at the moment

Force Sync Game State on Visibility Change

For overall engine robustness I'd recommend this approach. I'm not sure what'll happen in the next one.

Listen for the browser/engine visibility event and sync actor state to the latest server state to the tab that just became active

engine.events.on('visible', (evt: VisibleEvent) => { /* sync server state to game state */})

Are you using Actor.actions.moveTo to move actors around when they get a message from the server? If so you might need to clear out actor actions during your sync to avoid odd fighting with the sync Actor.actions.clearActions()

Manually Drive the Clock with Worker

The TestClock was only intended for testing and debug, so this will have other problems like not accounting for frame drops or different screen refresh rates.

There is an interesting post on using a web worker to keep time for you https://stackoverflow.com/a/75828547/839595

I've tried this code locally and seems to work...

class WorkerInterval {
  worker = null;
  constructor(callback, interval) {
    const blob = new Blob([`setInterval(() => postMessage(0), ${interval});`]);
    const workerScript = URL.createObjectURL(blob);
    this.worker = new Worker(workerScript);
    this.worker.onmessage = callback;
  }

  stop() {
    this.worker.terminate();
  }
}

const game = new ex.Engine(...);
game.start().then(() => {
   game.clock.stop(); // stop the built in rAF clock
   const clock = game.clock.toTestClock(); // grab a test clock
   clock.start(); // needs to be started to step

  // manually drive from worker
  const interval = new WorkerInterval(() => clock.step(16), 16); // 60fps
});

[mamfloo]

Thank you very much, your suggestions helped my to solve the problem, in the future i will have to think a better way to handle the skills that were casted by the other players during the incative time but it is not a big problem.

The game is an open world online fast peaced pvp/pvm rpg where players will be able to level up / unlock new spells/ costumize their build as they level up.... for now it is in very early stage but i wold like to make it available as soon as possible , probably in the next weeks i am gonna upload some videos about it.

[eonarheim]

I'd love to signal boost on socials! Let me know when you have links!