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?