Smooth movement in a short amount of time

[ijonatron]

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

[ivan.popelyshev]

Your code looks fine. Please make a fiddle

[ijonatron]

Thanks Ivan, which method looks good? The constant movement by velocity and the delta or the interpolation? In the case of the first one, the issue is that it moves faster on the client than on the server due to different loop rates. In the case of the second, I could try making a fiddle but the project is relatively complex with a server and such so I'm not 100% sure I can replicate the behavior but I'll try.

[ijonatron]

Ok so I threw together a quick fiddle. Player movement is shown by moving a tiling sprite towards the mouse target. I just grabbed a random image to use as the background with lots of lines and colors so jitter would be more noticeable. This looks very close to how my project does right now. There is a very slight jitter in movement that I can't seem to smooth out. I'm open to any and all suggestions?.

[ijonatron]

Just made another slightly different version here where the player is a square moving around the canvas. In this one, movement seems smooth to me, leading me to believe that maybe the jitter is from the tiling sprite? Anyone have any insight on this?