Hud scene shows unattended behavior when zooming in.

Phaser 3
1

Dear all,

I have two scenes: first scene “game” and second scene “hud elements”. I first load in the “game“ scene after which on top of I load the “hud” scene. So far so good, the “hud” scene moves along with the game scene as supposed to.

However, I lent some code from the forum and tutorials to realize scrolling and zooming, see below. As long as drag the game field with mouse button pressed the “hud” scene behaves as expected. As long as I zoom out the “hud” scene behaves as expected. But when I start zooming in, the “hud” scene starts disappearing or shows unattended behavior. I fiddle around and can’t seem to grasp why this is happening.

I have two questions.

Question one: why is this happening on zooming in?

And question two: how can I fix this?

The code for moving and zooming:

// Function for move around the map with mouse down
this.input.on("pointermove", function (p)
{
if (!p.isDown) return;
    cam.scrollX -= (p.x - p.prevPosition.x) / cam.zoom;
    cam.scrollY -= (p.y - p.prevPosition.y) / cam.zoom;
});

// Code to zoom in and out at a map
this.input.on("wheel",  (pointer, gameObjects, deltaX, deltaY, deltaZ) =>
  {
    if (deltaY > 0)
    {
        var newZoom = this.cameras.main.zoom -.1;
        if (newZoom > 0.3)
        {
            this.cameras.main.setZoom(newZoom);
        }
    }

    if (deltaY < 0)
    {
        var newZoom = this.cameras.main.zoom +.1;
        if (newZoom < 1.3)
        {
            this.cameras.main.setZoom(newZoom);
        }
    }
  });

The code in the “hud scene”

create()
{
  var information_element_two = this.add.sprite(1850, 875, 'information_element_music').setInteractive().setScrollFactor(0);
}
2

:wave:

Can you attach the full code for both scenes?