Mobile Responsive

Hi, guys!
I faced the problem when try to make my game responsive for mobile apps
The problem is in scale mode = FIT
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);


  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:

Here is the same problem in examples - very blurry
The problem is in canvas size + zoom of camera. Could you please help to configure properly this?

What I’m trying to reach:

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

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).

Hi, maybe this option will suit you?