javascript – How to prevent camera motion blur when following a character?

I’m developing a top-down pixel-art game and previously I was having the camera follow the player like this in the camera’s update function (called every frame):

this.x = playerPos.x;
this.y = playerPos.y;

And that worked to have the camera follow the player. It would directly stick onto the player and have no motion blur.

However, I read online that lerping the camera to make its movement smooth is often more desirable to the player. I found this excellent answer by DMGregory and implemented it like so:

let followSharpness = 0.1;
let blend = 1 - Math.pow(1 - followSharpness, Globals.deltaTime * 30);

let xOffset = playerPos.x - this.x;
let yOffset = playerPos.y - this.y;

this.x = Helpers.lerp(this.x, playerPos.x + xOffset, blend);
this.y = Helpers.lerp(this.y, playerPos.y + yOffset, blend);

Which also worked. The issue though is that now the character is very blurry when the camera is tracking it. I’m not sure what is causing this, or even how to debug it. Some things I’ve noticed:

  • When the camera catches up to the player sprite, the sprite is no longer blurry
  • The player sprite seems more blurry than every other entity on the screen
  • If the player stops moving, he is no longer blurry
  • The player sprite only seems blurry when moving
  • All entities have float positions, and so did the camera previously, so I don’t think it has to do with that.

Anyone have any clue on why this might be happening, or how to solve it?