I am making a simple 2d real-time browser online game with an authoritative server (like any other .io game). I receive game state snapshots roughly every 50 (40 - 70)ms. They consist of all visible game objects with positions, sizes, and colors. I have a state buffer where these snapshots are stored before they are processed. I decided that I want to render 100ms behind the newest snapshot I have. I have an update function that is called every frame. It receives deltaTime - time after the last call and snapshotBuffer - array with all the snapshots in an order I received them. In an update function I can set objects' positions to fresh ones and this will automatically set their current positions to previousPositions

my general question is:

What is the correct algorithm of consumption snapshots from the buffer in update function to get smooth interpolations and always stay behind the server the desired amount of time?

I have read all the related articles by Gabriel Gambetta, Gaffer on games and valve related to this topic, but I still can't figure it out

  • \$\begingroup\$ It sounds like you're not doing any interpolation at all, just using the closest recorded point? What problem are you actually having? Simplest way is to grab 2 points from your snapshotBuffer, these being the point before the current 100ms delayed time (A), and the point after (B). Then set your display point to a percentage in the segment calculated between B-A based on your actual frame time. Linear interpolation. Other ways build a curve from A-B-C then choose a point along the curve, which is smoother if items are changing directions a lot. \$\endgroup\$ – Patrick Hughes Mar 5 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.