Search code examples
javascripthtmlgame-enginemultiplayerlance

Lance.gg in multiplayer html5 game does not sync


I'm trying to make a multiplayer game in HTML5. I found lance.gg and play around. I modified the Pong game like this.

  • remove Paddle (only Ball left)
  • set gravity to (0, 0.1)
  • set Ball.velocity.y = -3 each time keyboard input space bar

And here is result https://youtu.be/MmQOqR71Df0. As you can see, it does not really sync over the window. How can I make it move smoothly between many players?


Solution

  • The Ball.js class defines the following getter:

    get bendingVelocityMultiple() { return 0.0; }
    

    This instructs the client to ignore the server's velocity updates. The result is that the client and server velocities fall out-of-sync, and results in the video you captured.

    If you set instead:

    get bendingVelocityMultiple() { return 0.8; }
    

    Then the problem will go away. Having bendingVelocityMultiple set to zero might be useful in other cases though, for example if you want to transplant the ball back to the center when a player has lost.

    Take a look at the documentation for GameObject