Lag compansation example using @gamestdio/timeline in client

Hey everyone!

I'm just experimenting with the framework and have implemented a simple example which moves an object to a random point on the screen.

onInit(options) {
    // set state
    // ...

    this.setSimulationInterval(() => this.tick(), 1000/30);

My question is how i can use the Timeline class in client to interpolate the object movement?
In other words how can i use the timeline snapshots from server in the client?


Hi @shortid,

The Timeline is an experimental feature only present for lag compensation on the server-side. I personally haven't seen anybody using it yet. You can add it as a dependency in your client-side and take the snapshots whenever the state updates if you'd like to.

There's a big difference between lag compensation and client prediction techniques, though. I think you're looking for client-prediction. Unfortunately, the framework doesn't provide an easy way of doing either.

@endel @shortid
There is also a case for using interpolation on the client-side, not just prediction.

In the case of the Source engine (e.g. Counter Strike), there are buffered patches on the client side.

Ex. Client receives state update N, it buffers the update and instead interpolates between N-1 and N (this mitigates packet loss issues from UDP - the engine has settings to allow buffering of multiple updates in more unstable network conditions)

Edit: Then client side prediction is layered on top of this to make user-controlled objects feel more responsive.

Edit2: Even though Colyseus uses TCP on the client side, it still could be beneficial to use interpolation on the client side
(with only one buffered update, as multiple buffered updates won't really accomplish anything on TCP) as otherwise the enemies would get stuck in one place on the screen for waiting for the next update. There's also a case for using dead reckoning / extrapolation, but it has issues as well.