My lerp function is finishing too fast, any ideas on how to fix it?

[thedupdup]

Im trying to make a lerp function on an online game. Im doing this by having a buffer list, I append each server update to a list, and lerp over the contents, here is an example:

 

movementBuffer.unshift(gameUpdate); //when a new update is received

//in the main loop
timeElapsed += delta;

lerpPerc = timeElapsed / updateRate; //percent which is lerped to



if(lerpPerc > 1){ //when the lerp is finished, the states that were just lerped are removed from the buffer

movementBuffer.splice(prevData.length - 2, 2); //remove the previous states from the buffer
state1 = prevData[prevData.length - 1];
state2 = prevData[prevData.length - 2];
timeElapsed = 0;
lerpPerc = 0;
}


for (i = 0; i < state2["players"].length; i++) {

// update the players
prevY = state1["playery" + state["players"][i]];
prevX = state1["playerx" + state["players"][i]];

x = state2["playerx" + state["players"][i]];
y = state2["playery" + state["players"][i]];

//lerp to the new x and y

playerCoords[recivedData["players"][i]][0] = lerpF(prevX, x, lerpPerc);
playerCoords[recivedData["players"][i]][1] = lerpF(prevY, y, lerpPerc);

}

 

 

The problem here is the `lerpPerc` goes by too quickly, so it basically deletes all items in the buffer, leaving nothing to be lerped to. What am I doing wrong here?

[Antriel]

Seems like you are removing 2 items from the buffer while only adding 1 every update tick. When you are lerping 1-2, and 3 comes, you start lerping 2-3, so you should only remove 1.

Also this way you will get a bit jittery movement, because if the `lerpPerc > 1`, you are actually discarding the remainder. You would need to roll it off otherwise the position will seemingly go back in time. But to achieve smoothness in that, you need bigger interpolation period than one update tick. Packets can get delayed. You need to keep your time in sync with server and have big enough buffer to accommodate delays. Extrapolating if needed (which can look weird when entities penetrate walls in physics based games) or stop the entity (which can feel jittery), depends on the game.

Furthermore, Phaser smooths out deltaTime, so the value is widely different from actual deltaTime. For best results you would need to use the real time in calculating this. And if it's a game with long gameplays, it might be a good idea to keep in mind that timers aren't perfect and your client's clock can go faster/slower than server's clock.

See https://antriel.com/post/online-platformer-5/ for my approach.

[thedupdup]

2 minutes ago, Antriel said:

Seems like you are removing 2 items from the buffer while only adding 1 every update tick. When you are lerping 1-2, and 3 comes, you start lerping 2-3, so you should only remove 1.

Also this way you will get a bit jittery movement, because if the `lerpPerc > 1`, you are actually discarding the remainder. You would need to roll it off otherwise the position will seemingly go back in time. But to achieve smoothness in that, you need bigger interpolation period than one update tick. Packets can get delayed. You need to keep your time in sync with server and have big enough buffer to accommodate delays. Extrapolating if needed (which can look weird when entities penetrate walls in physics based games) or stop the entity (which can feel jittery), depends on the game.

Furthermore, Phaser smooths out deltaTime, so the value is widely different from actual deltaTime. For best results you would need to use the real time in calculating this. And if it's a game with long gameplays, it might be a good idea to keep in mind that timers aren't perfect and your client's clock can go faster/slower than server's clock.

See https://antriel.com/post/online-platformer-5/ for my approach.

Hi, can you elaborate on what you mean by 'you need to roll off the remainder'? Thanks for the help!

[Antriel]

Just now, thedupdup said:

Hi, can you elaborate on what you mean by 'you need to roll off the remainder'? Thanks for the help!

Instead of `timeElapsed = 0`, it should be `timeElapsed -= updateRate`.

[ivan.popelyshev]

movementBuffer.splice(prevData.length - 2, 2);

You remove two instead of 1.

movementBuffer.pop();

that's it.