How to center the player sprite in the camera in a MMO game?

[caymanbruce]

I used to have a function that center the player sprite in the camera, like this (in the camera class):

centerOver: function(sprite) {

    const vx = sprite.x - (this.width / 2) - this.x;
    const vy = sprite.y - (this.height / 2) - this.y;
    this.translate(vx, vy);
 },

 translate: function(vx, vy) {
    this.x += vx;
    this.y += vy;
 }

So that the player can be in the middle of the screen and the camera follows the player smoothly. vx, vy are the horizontal velocity and vertical velocity. with and height is the camera's width and height, and this.x, this.y represent the top, left position of the camera in the map.

But now I am developing a MMO game. The player's position is no more smooth all the time. It may occasionally jump a bit when the latency is too high, but I still want the player to be in the center of the camera. What should I do?

[Taz]

What I've been doing is moving the client player's avatar to the center of the window in the resize handler. Other than on resize, this sprite never moves. In my animate function, for each other object, I calculate the game-world-distance between the client player and the other object, convert this distance to pixels based on the maximum window dimension, and then I add this distance to the center to calculate the other sprite's position (this is done for each axis separately). But for background objects, which only exist on the client, I just move them by the opposite of the player's velocity, to help simulate the player's movement.

Handling latency is pretty application-specific, but basically to combat jumpiness you can limit the maximum position change allowed per frame and let the position catch up to the server a little each frame instead of all at once. And the better you can get the client to predict the position, the more the total amount of correction needed is minimized. Personally I read lots of forum topics, guides, etc. (on "mmo client server synchronization", "mmo client side prediction", "mmo smooth position lerp", etc.) with lots of trial and error... But it's still a work in progress to balance smooth movement with the need for accurate positions.

[caymanbruce]

10 hours ago, Taz said:

What I've been doing is moving the client player's avatar to the center of the window in the resize handler. Other than on resize, this sprite never moves. In my animate function, for each other object, I calculate the game-world-distance between the client player and the other object, convert this distance to pixels based on the maximum window dimension, and then I add this distance to the center to calculate the other sprite's position (this is done for each axis separately). But for background objects, which only exist on the client, I just move them by the opposite of the player's velocity, to help simulate the player's movement.

Handling latency is pretty application-specific, but basically to combat jumpiness you can limit the maximum position change allowed per frame and let the position catch up to the server a little each frame instead of all at once. And the better you can get the client to predict the position, the more the total amount of correction needed is minimized. Personally I read lots of forum topics, guides, etc. (on "mmo client server synchronization", "mmo client side prediction", "mmo smooth position lerp", etc.) with lots of trial and error... But it's still a work in progress to balance smooth movement with the need for accurate positions.

Thanks I figured out I was misplacing the centerOver function in my render update loop. Now I put it in the right order with the position update function and it is working fine.