Resize background image doesn't correct

Phaser 3
1

Hi all!
I’m trying to make an adaptive background for all resolutions in phaser. I was able to achieve the desired effect, but only in devtools mode. When I look at the background in a regular browser window, it gets cut off. Is there a way to bring the scale state to a single view?
The first photo is the desired behavior.
The second photo is what it looks like without devtools.
Also, i give my code for scale background.

image
image1593×885 81.6 KB

image
image1910×882 66.2 KB

// config

  const config = {
    type: Phaser.AUTO,
    scene: scenes,
    physics: {
      default: "arcade",
      arcade: {
        default: false,
      },
    },
    scale: {
      width: window.innerWidth,
      height: window.innerHeight,
      mode: Phaser.Scale.RESIZE,
      autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    autoRound: false,
  };

// method for scale background

  fillBackground() {
    const initialWidth = ResizeObserver.isMobile(this);
    initialWidth
      ? this.#createBackground(this.#backgroundDesktopName)
      : this.#createBackground(this.#backgroundDesktopName);

    const screenWidth = this.scale.width;
    const screenHeight = this.scale.height;

    if (!this.#backgroundFill) return;
    const scaleX = screenWidth / this.#backgroundFill.width;
    const scaleY = screenHeight / this.#backgroundFill.height;

    const scale = Math.max(scaleX, scaleY);

    this.#backgroundFill.setScale(scale);


    this.#backgroundFill.x = screenWidth / 2;
    this.#backgroundFill.y = screenHeight / 2;
  }

Thanks!

2

Phaser can scale the game for you if you set a resolution and then use Phaser.Scale.FIT. That will keep everything on the screen. If you let the browser window set the game resolution dynamically, I’m not sure how to keep things from getting cut off unless the screen is the exact same size or aspect ratio as the image. If you’ve ever done web development, it’s like using background-size:cover. It will cover the whole area, but you’re not in complete control of what you see inside the box you’re covering.

Also, I’m not sure you even need to set those width and height parameters with Phaser.Scale.RESIZE

3

Hi John!
My problem is that I need to scale the game to all resolutions. I was able to achieve this for the elements, but the background is really cropped. Is there a way to fix the background at the top left so that when resizing, the image always scales away from it?