Mobile Responsive

Phaser 3
1

Hi, guys!
I faced the problem when try to make my game responsive for mobile apps
The problem is in scale mode = FIT
e.g.
image
Ok, so I decide to use another approach with scale mode = RESIZE:

public static create(scene: Scene) {
    scene.scale.on("resize", function (gameSize: Size) {
      Resize.resize(scene, gameSize);
    });

    scene.scale.refresh();
  }

  private static resize(scene: Scene, gameSize: Size) {
    let { width: displayWidth, height: displayHeight } = gameSize;

    const currentRatio = displayHeight / displayWidth;

    let w = displayWidth;
    let h = displayHeight;

    if (currentRatio < this.ratio) {
      w = displayHeight / this.ratio;
    } else {
      h = displayWidth * this.ratio;
    }

    const scaleX = w / this.GAME_WIDTH;
    const scaleY = h / this.GAME_HEIGHT;

    const mainCamera = scene.cameras.main;
    mainCamera.setViewport(Math.ceil((displayWidth - w) * 0.5), 0, w, h);
    mainCamera.setZoom(Math.max(scaleX, scaleY));
    mainCamera.centerOn(this.GAME_WIDTH * 0.5, this.GAME_HEIGHT * 0.5);
  }

But when I run my game - it’s very blurry with low resolution:
image

Here is the same problem in examples - very blurry
https://labs.phaser.io/edit.html?src=src/scalemanager/mobile%20game%20example.js&v=3.55.2
The problem is in canvas size + zoom of camera. Could you please help to configure properly this?

What I’m trying to reach:

image
image352×576 2.51 KB

2

I think you’ll have to use mode NONE and a custom resize handler for this.

3

What I do is:

  • Define if the width or the height is the most important dimension of the game. Let’s say it is the width, with 1280px.
  • Create a canvas with the selected width (1280px) and compute the height using the device aspect ratio.
  • Set the FIT scale mode.
  • For placing the objects in the scene, I use layout utilities for adjusting the position of the objects to the variable height (remember we selected a fixed width). For example, in Phaser Editor I create user components like AnchorToBorder(top, middle, bottom).
4

Hi, maybe this option will suit you?