I have a multiplayer game done with Phaser, which runs in the browser and on a node.js server.
The server is authoritative, every 50ms or so it sends the game state object to all clients. The clients receive the state and update all instances accordingly. The game runs at 60fps, and the physics and AI are the same on clients on server, so if there is no user interaction the game will evolve exactly the same (the next frame on the server will be equal to the next one on the client). This should make sync much easier, but I have a problem:
When the client receives the state from the server, the state is no longer up to date (as there is the latency between server and client).
Here is a drawing:
Server: State1 -> State2 -> State3 -> State4 -> State5
................................................*-------------------V
Client : State1 -> State2 -> State3 -> State4 -> State5State3
So, when the client receives State3, it is no longer usable as it has already been at State3. This makes the game always rewind a few frames when it receives the update from the server. How can I solve this, taking in account that the same game engine runs on both client and server (so prediction is much easier).
I would try "rendering the game in the past" as I have seen in other cases, but I do not really think I can break Phaser physics/render loop connection.