Button hitArea not moving

Phaser 3
1

I have a side scrolled game. Mario like.
I made a pauze button with two frames.
All objects wich need to be shown on the HUD are added to an container called HUD.
Including the pauzeButton.

It works to pauze the game with pauzing all animations and physics.
(Because pauzing and resuming scene did not really work, it would’nt resume after pauzing.)

All code is at the moment in the create function and i do not work with classes.

BUT…
When the character moves to the right and the camera moves to follow the character the button remaines on place in the HUD, but the area where you can click for the pointerdown function to work is FIXED and does not move with it.

So lets say pauseButton is at 100, 10
And player moves 50 to the right.
The sprite will be on 150, 10
The area wich can be clicked will be on 100, 10

How do i resolve this?

2

Can you show the code, please?

How can you tell?

3 
gameLevel1.create = function() {
	this.physics.world.setBounds(0, 0, 1600, 600);

	background = this.add.image(400, 300, 'background');
	score = 0;
	scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
	wichLevel = this.add.text(300, 16, 'Level 1', { fontSize: '16px', fill: '#000' });

	pauseButton = this.add.sprite(350, 100, 'pauseSprite', 0).setScale(1);
	pauseButton.setInteractive({ cursor: 'pointer' });
	pauseButton.on('pointerdown', () => {
	    if (this.anims.paused)
	    {
	        this.anims.resumeAll();
	        console.log("play");
	        this.physics.resume();
	    }
	    else
	    {
	        this.anims.pauseAll();
	        console.log("pause");
	        this.physics.pause();
	    }
	}, this);
	pauseButton.on('pointerover', () => { pauseButton.setFrame(1); });
	pauseButton.on('pointerout', () => { pauseButton.setFrame(0); });
	
	hud = this.add.container(0, 0, [background, scoreText, wichLevel, pauseButton]);
	hud.setScrollFactor(0);

	player = this.physics.add.sprite(50, 50, 'playerSprite');
	player.setBounce(0);
	player.setCollideWorldBounds(true);
	player.body.allowGravity = false;

	stars = this.physics.add.group({
		key: 'starSprite',
		repeat: 11,
		setXY: { x: 12, y: 0, stepX: 0 }
	});

	stars.children.iterate(function(child) {
		child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
	});

	bombs = this.physics.add.group();

	this.physics.add.overlap(player, stars, collectStar, null, this);

	this.physics.add.collider(player, platforms);
	this.physics.add.collider(stars, platforms);
	this.physics.add.collider(bombs, platforms);
	this.physics.add.collider(player, bombs, hitBomb, null, this);

	camera = this.cameras.main;
	camera.setBounds(0, 0, 1600, 800);
	camera.startFollow(player, true, 0.05, 0.05, 0, 0);

	cursors = this.input.keyboard.createCursorKeys();	
};

How can i tell?

My mouse pointer remains the same when player had moved and I hover above the pauseButton. And when I go to the same direction of wich the player moved, but then from the button I see that my moise poiter changes in the hand and the animation of the button sprite works.

4

Character moves to the right:

Image1
Image11478×874 23.5 KB

Explaining what i mean, visually:

Image2
Image21491×874 15.6 KB

5

I guess that could be a Phaser bug.