Search the Community

I'm facing a frustrating conflict between client prediction and smooth movement that hopefully someone can help me out with. Every 15ms, the client gets a target from the mouse position and sends it off to the server and immediately simulates the effects. I'll call this the input tick. When an update is received from the server, the client compares its current state with the server's state + any unacknowledged input. They should usually match pretty closely and in my implementation they do. Because the details of that interaction are out of the scope Pixi, that's all I'll say about that. Just know that it currently works as expected. My issue is that when the client simulates the effects of each movement, it is moving across relatively large amounts of pixels very quickly, leading to understandably jittery movement. Each input tick, the player needs to move upwards of 8 pixels which seems small but is very noticeable if it isn't smooth. Here is my movement code... const distance = getDistance(this.local.pos.x, target.x, this.local.pos.y, target.y); this.local.direction = Math.atan2(distance.y, distance.x); /* speed = 8 */ this.local.pos.x += speed * Math.cos(this.local.direction); this.local.pos.y += speed * Math.sin(this.local.direction); The movement works as intended but in a jittery fashion. So I tried instead setting the player velocity like so... /* speed = 8 */ this.local.vel.x = speed * Math.cos(this.local.direction); this.local.vel.y = speed * Math.sin(this.local.direction); Then in Pixi's ticker, update the position like so... this.local.pos.x += this.local.vel.x * delta; this.local.pos.y += this.local.vel.y * delta; The delta here is the ticker's deltaTime which should make for smooth frame rate independent movement. And it does!? Except it throws the whole prediction-reconciliation aspect out of whack.? This is because now the player is moving with the animation loop and at a different speed due to the delta. I also tried lerping between the current position and the predicted position but I think that since the input tick rate is so low, the lerp function is only interpolating between a couple states. I tried doing this in the Pixi ticker loop... /* this is reset every 15ms with each input tick */ sincePrediction += app.ticker.elapsedMS; const smoothPeriod = 15; const delta = sincePrediction / smoothPeriod; manager.interpolate(_.clamp(delta, 1)); Then in the "manager.interpolate" method using the lerp function to interpolate between the previous and next state. But as I said, I think since 15ms is so low, lerping essentially just jumps to the next state here. So, I need a way to smoothly move to the new position up until the next prediction tick hits in 15ms. Sorry for the long question, I wanted to be thorough. Please let me know if any more info is needed. Any suggestions, advice, and help is appreciated