HMR Support

[DrSensor]

Any tips on how to do hot reloading using ESM HMR API?
Or is it already supported out of the box?

(I'm using vite)

[kamranayub]

I was just discussing this with @eonarheim the other day.

There's nothing yet and this would be pretty complex I think due to having an engine loop running and maintaining state across reloads.

Let's say you have an actor moving in a loop left to right, like a guard. There will be state and actions running every frame.

If I modify the actor to adjust their velocity, what would be awesome is to live update it and keep the action state maintained and the actor would speed up without missing a beat.

I suspect this will be hard (if not impossible?) to do without more infrastructural work (will we need formal state management?). An MVP could probably be to reload the current scene although there could still be global state hanging around as it's common to share game instance across modules.

So, in short: I could be wrong. I haven't investigated HMR in any depth. We have no idea what might or might not work and what it would entail. It's worth exploring to see what walls we'd run into and make make a list of tasks required to support HMR.

It isn't a priority yet while we focus on core APIs, but it could be a good community issue to experiment with and share findings. I'd also be interested to know if Phaser has tackled this and how, if so.

[didii]

This is kind of a brute force approach, but I'm working with a framework that supports HMR (Vue.js), but the excalibur game will never update, even when the component managing the game gets redrawn. So I've added some HMR code that the game just starts all over when anything changes. This is at least alleviates the need to manually refresh the page after any change in your game.

Wherever you start the game:

function startGame() {
  const game = new Game();
  // more initialisation
  return game;
}
let game = startGame();

if (module.hot) {
 module.hot.accept('./game', () => {
    // Option 1: Soft reload with possible memory leak issues
    game.stop();
    game = startGame();
    // Option 2: Hard reload
    window.location.reload();
  });
}

This means: if hot reload is enabled and anything in the folder ./game get updated, the lambda should be executed. Since I don't think Excalibur has any option to actually completely stop your game, the first option can have memory leaks if you use any .on('') bindings since they do not get stopped and thus might keep your previous game alive. Option 2 is a bit more brutal but will solve that memory issue.

Note that of course all your game logic should then be nested in the folder ./game.

[kamranayub]

Yes, here's an example of using with Next.js + HMR (same would need to be done with CRA, although you would not need to use dynamic import since it's all client side).

https://codesandbox.io/s/next-excalibur-5b18x?file=/game/index.tsx

Since I don't think Excalibur has any option to actually completely stop your game

You can use game.stop() if you have access to the instance, fyi. 👍