Where to define animations in client/server (+ implications for how to structure player classes)?

Phaser 3
1

This is a two-step question:

  1. Where to define animations (client vs server) in general?
  2. Is my current setup, with a Player class playing animations at the update stage, causing the server to try to play animations? If yes, what’s the recommended class structure that defines playable characters with animations in a client/server paradigm?

The error

I’m building a multiplayer game with a client/server structure following the geckos.io example. I’m confused as to where, in client or server, to define animations. This post and others suggest that animations should be defined on the client side. However, when I do define animations on the client, on the server side I run into this warning:

Missing animation: blue-idle-left

(blue-idle-left is the name of the spawning animation for my player) and, after timeout, into this error:

Error: Uncaught [TypeError: Cannot read property 'play' of undefined]

Running console.log(this.textures.getTextureKeys()); prints an empty array on the server side, but the expected keys on the client side.

What I suspect is happening

I believe that my server is trying to run animations (and not finding them) because of how players are defined in my game. I instantiate a new Player every time a new connection is detected. The Player instance is updated every time scene.update() is called, and its updates include playing animations (depending on which state the player is in). This structure was convenient when I was running tests locally using VSCode’s Live Server Preview, but now I suspect it’s forcing my server to run animations, which it can’t find because they aren’t defined on the server side. Does this sound plausible? If yes, what’s a recommended class structure for Player such that:

  • Animations run on the client side
  • Different physics are enabled on the server side depending on the state of Player?

E.g. I have a ‘sword swinging state’ which activates a new hitbox. How can I structure my Player class such that the sword swinging animation is played on the client side, but its hitbox is included on the server side physics?

Thanks a lot for your help, Phaser community!