Fast-Paced Multiplayer: Sample Code and Live Demo

Part I - Part II - Part III - Part IV - Live Demo

This is a sample implementation of a client-server architecture demonstrating the main concepts explained in my Fast-Paced Multiplayer series of articles (except for Entity Interpolation, which I haven’t done yet). It won’t make much sense unless you’ve read the articles first.

The code is pure JavaScript and it’s fully contained in this page. It’s less than 400 lines of code, including a lot of comments, demonstrating that once you really understand the concepts, implementing them is relatively straightforward.

Player View

Lag =ms · Prediction · Reconciliation

Waiting for connection…

Server View

Update times per second

Guided Tour

The two views show what the player sees, and the state of the world according to the server. You can control the green ball using the right and left arrow keys. Give it a try!

The ideal case

Start with Lag = 0 and Update = 60. This is an ideal case: the Server processes the world state as fast as the client produces it, and there’s no delay whatsoever between the Client and the Server. Of course, it works perfectly.

Slow server

Now set Update = 5. The Server now sends only 5 updates per second, so the animation on the Client side looks choppy. But the whole thing still feels somewhat responsive.

Laaaaaaaaaaaaaaaaaag

Let’s add some Lag - set it to 250 ms. The game doesn’t feel so responsive anymore; the player’s view is not updated until the Server has acknowledged the inputs sent by the Client. Because of the two-way lag, the character starts moving half a second after you press the key.

Client-Side Prediction

Enable Prediction and lower Update to 1. Keep the right key pressed for a while. Now the animation feels very smooth, because it’s predicted on the Client. But whenever the Server finally gets around to processing all the client inputs, the state it sends back is delayed respect to the player’s prediction because of the lag, so the Player jumps back.

Server Reconciliation

Now enable Reconciliation. Whenever the Server sends its state, we take all the not-yet-acknowledged inputs and redo the prediction, starting from the authoritative position sent by the Server. No matter how much lag you add or how infrequent the server udpates are, the Client is always in sync!

Series Index