Can I bind a sprite's body to the camera?

Phaser 3
1

I’ve got a scene where a camera follows a player sprite which moves within a bounded world.
As well as the player sprite, there are other widgets on the screen: Timer, score, and lives. I used .setScrollFactor(0) on all of them to bind them to the camera without a problem.

I have another widget at the bottom of the screen called target. I want to make the player widget collide with it when it reaches the world boundary. The image itself stays bound to the camera, but the body stays in the same place in the world. Is there any way I can make the body stay in the camera frame?

Here is some of my code:

create(){
    //  Set the camera and physics bounds to be the size of 4x4 bg images
    this.cameras.main.setBounds(0, 0, config.scale.width * 2, config.scale.height * 2);
    this.physics.world.setBounds(0, 70, config.scale.width * 2, config.scale.height * 2 -70);
    //  Mash 4 images together to create background
    this.add.image(0, 0, 'blue_bg').setOrigin(0);
    this.add.image(config.scale.width, 0, 'blue_bg').setOrigin(0).setFlipX(true);
    this.add.image(0, config.scale.height, 'blue_bg').setOrigin(0).setFlipY(true);
    this.add.image(config.scale.width, config.scale.height, 'blue_bg').setOrigin(0).setFlipX(true).setFlipY(true);
    //timer setup
    this.timedEvent = this.time.delayedCall(120000, this.lvlTwoComplete, [], this);
    this.timerLabel = this.add.bitmapText(424, 15, "pixelFont", "00:00 ", 100).setScrollFactor(0);
    //score label and life gauge
    this.scoreLabel = this.add.bitmapText(10, 15, "pixelFont", "SCORE " + this.score, 60).setScrollFactor(0);
    this.livesLabel = this.add.bitmapText(775, 15, "pixelFont", "LIVES " + this.lives, 60).setScrollFactor(0);
    this.lifeGauge = new LifeGauge(this, 950, 10).setOrigin(0.5, 0).setScale(4).setScrollFactor(0);
    //target square
    this.add.bitmapText(21, config.scale.height - 170, "pixelFont", "TARGET", 60).setScrollFactor(0);
    this.target = this.physics.add.image(10, config.scale.height - 10, 'target').setOrigin(0,1).setScrollFactor(0);
    this.target.enableBody = true;
    this.target.body.immovable = true;
    //controls
    this.cursorKeys = this.input.keyboard.createCursorKeys();
    this.wasdKeys = this.input.keyboard.addKeys('W,S,A,D');
    //player object
    this.serol = this.physics.add.sprite(config.scale.width / 2, config.scale.height / 2, 'fullscreen').setScale(0.5).setOrigin(0.5, 0.5);
    this.serol.setCollideWorldBounds(true);
    //set camera to follow player
    this.cameras.main.startFollow(this.serol, true, 1, 1);
    this.physics.add.collider(this.target,this.serol);
}

image
image.png1152×721 6.41 KB

This is what I would like to see: target sprite in the bottom left regardless of where the player sprite is

image
image.png1152×722 4.28 KB

This is what I’m getting: sprite’s body stays in the same coordinates when the player sprite moves and is followed by the camera.