Responsivity on a point&click (bg scrollable on smaller screen)

Phaser 3
1

Hello everyone,

Pretty new to phaser and really enjoying my dev experience. Did multiple tutorials and examples but there is an issue I can not manage to solve properly though I think there has to be a way to do it simply. I am working on a point&click, the background image is quite a big image with a lot of details. Here is my config:

export const config: Phaser.Types.Core.GameConfig = {
  title: "Point&Click",
  type: Phaser.AUTO,
  scene: [Boot, Preload, GameScene, ...(other game scenes), UiScene],
  backgroundColor: "#333",
  scale: {
    mode: Phaser.Scale.FIT,
    parent: "game-container",
    autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
    width: 3302,
    height: 2201,
    max: {
      width: 3302,
      height: 2201
    },
    min: {
      width: 1200,
      height: 800
    }
  }
};

What I want is that on big screen (wider than 1200px) the game is played seeing the whole background picture. But on a mobile or smaller screen I want to have a scrolling/sliding way of moving on this background scene. Indeed if simply responsive the image would be too small for the game to be played.

I implemented a custom function that I am a calling in every of my game scenes for that but it seems overkill and still is not fully functional. Also it only works on the game scene but I also have to do custom code to fit my UiScene on top of it properly. Here is my custom function:

  makeResponsive() {
    this.input.on("pointermove", (p) => {
      if (!p.isDown || window.innerWidth > config.scale.min.width) return;
      const maxScrollX =
        (config.scale.max.width -
          window.innerWidth /
            (config.scale.min.width / config.scale.max.width)) /
        2;

      const maxScrollY =
        config.scale.max.height -
        window.innerHeight / (config.scale.min.width / config.scale.max.width);

      const newScrollX =
        this.cameras.main.scrollX -
        (p.x - p.prevPosition.x) / this.cameras.main.zoom;

      this.cameras.main.scrollX =
        newScrollX < -maxScrollX
          ? -maxScrollX
          : newScrollX > maxScrollX
          ? maxScrollX
          : newScrollX;

      const newScrollY =
        this.cameras.main.scrollY -
        (p.y - p.prevPosition.y) / this.cameras.main.zoom;
      this.cameras.main.scrollY =
        newScrollY < 0 ? 0 : newScrollY > maxScrollY ? maxScrollY : newScrollY;
    });
  }

Here is a simplified reproductible example: https://codepen.io/Ivonig/pen/VwdzRma

Change browser width to see how to use the “drag n’ drop” of the background to move within the scene. It jumps a lot and still has issue but shows what I’d like to achieve. I feel that there has to be a config to make all this simplified but couldn’t find it. Any idea ?

Thanks a lot in advance.