Parallax background speeds change when moving sprite

Phaser 3
1

I’ve got a project setup with a canvas size of 640x480.

I’ve setup a simple parallax background effect composed of two images setup as tile sprites.

I’ve also added a sprite that can be moved with the cursor keys.

The problem is that after a few moments of moving the sprite in any direction, the parallax effect speeds up before slowing down again when the sprite approaches the other side. I want the effect to be a consistent speed.

What causes this issue and how can it be fixed?

Thanks.

Here is my update function code for the parallax bg effect.


if (this.cursors.left.isDown) {
  this.background.tilePositionX -= 1;
  this.midground.tilePositionX -= 2;
} else if (this.cursors.right.isDown) {
  this.background.tilePositionX += 1;
  this.midground.tilePositionX += 2;
}

if (this.cursors.up.isDown) {
  this.background.tilePositionY -= 1;
  this.midground.tilePositionY -= 2;
} else if (this.cursors.down.isDown) {
  this.background.tilePositionY += 1;
  this.midground.tilePositionY += 2;
}