Collisions on client, versus server occur at different locations

I’m creating a game, where I’m running phaser on both the client, and server.

Both are using Arcade physics, with an identical config. They both use a tiled map, and the same code to create an entity.

The problem i’m having, is probably easiest to explain via a GIF. In the example there’s 2 players - one represents the client (black outline), and the server (pink outline)

When I get to the building, you can see my client sprite, is stopped about 20px before my server one.

So to break it down -

  • Both server and client, start at Y=1216px
  • Player moves up smoothly on client, up until it hits client side collision @ Y=1128px
  • The server however receives my input (up), and carries on past the clients detection, with the collision not taking affect until Y=1112px

Now I have a client, which is out of sync with my server, which causes problems once I add client side reconciliation back in (the client would try to jump to a position, which isn’t actually allowed)

Here’s my code for reference -

Phaser setup

Creating tile-map

Entity setup code (server watches ALL entities for collisions, client only adds collision to the actual player driving that client )

both have the collision added to the same tile-map layer

Does anyone have any ideas this might be?

You can use electron to debug the physics on your server: Phaser 3 - Real-Time Multiplayer Game with Physics #2

You can code your server side game in an isomorphic way to be able to run it on electron (debug) or node.js (production).