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?

4

I’m not sure I’m following your question. What I would do in your case is either load different background layers for different screen sizes, or split the background into multiple images and change the alignment for breakpoints.

As an alternative, have you tried just loading the background image in CSS (outside of Phaser) and using background-size:cover? It seems like that’s what you’re going for. I’m not familiar with mimicking that behavior in the game engine.

5

The problem with your approach is that you’re using just one background image, even though there are many devices with different aspect ratios. Sure, you could stretch the image to fit the screen, but it’ll look distorted. Based on your images, I’d recommend breaking the design into separate elements and adjusting their placement dynamically based on the window size