Help! Resizing a game with dpr (device pixel ratio)

Phaser 3
1

Dear all,

Our game resizes perfectly on desktop and mobile. The problem is that on devices with higher DPR the images look pixelated.

Here is the current setup:

    const width = window.innerWidth;
    const height = window.innerHeight;

    const config: GameConfig = {
      type: Phaser.CANVAS,

      scale: {
        fullscreenTarget: 'app-root',
        parent: 'the-canvas',
        mode: Phaser.Scale.RESIZE,
        width: width,
        height: height,
      }
    };

On each resize we call:

gameResize(){
    // Long and tedious calculations omitted
    this.scene.cameras.main.setSize(gameSize.width, gameSize.height);
    this.scene.cameras.main.setZoom(cameraZoom * zoomScale);
}

Desired:

width = window.innerWidth*dpr;
height = window.innerHeight*dpr;

Attempts:

  1. Changing the mode to FIT, the game fits and the resolution of the game is perfect (no pixelated sprites). The game does not resize when we change orientation.
    a. Tried manually resizing the canvas to no avail.
    b. Tried manually setting css properties witdh + height at 100%
    c. Tried manually setting this.scene.scale.canvas.width and height.

  2. When the mode is RESIZE there is no change at tall. The game width and height remains small, even though I have set it to *dpr (dpr on my phone is 2) in the config.
    a. Tried adding resolution to the game config, but this is not working currently (as read in the documentation)
    b. Tried in oh so many ways to set the gameSize to be higher with no success…

If you have any suggestions, I would be very grateful.

2

I used to scale the images as of dpr of the Devices. If i am correct there are only three major DPR’s that we should look at so i did the different scale factor for all.

3

For those of you having the same problem as I did:

Game Config:

 const width = window.innerWidth * dpr;
 const height = window.innerHeight * dpr;

scale: {
mode: Phaser.Scale.FIT,
        width: width,
        height: height,
}

On Resize:

 const widthDPR = Math.round(window.innerWidth * dpr);
 const heightDPR = Math.round(window.innerHeight * dpr);
 // this.scene.scale.setParentSize(window.innerWidth, window.innerHeight);
 this.scene.scale.parent.width = Math.round(window.innerWidth);
 this.scene.scale.parent.height = Math.round(window.innerHeight);

 this.scene.scale.canvas.width = widthDPR;
 this.scene.scale.canvas.height = heightDPR;
 this.scene.scale.canvas.style.width = Math.round(window.innerWidth) + 'px';
 this.scene.scale.canvas.style.height = Math.round(window.innerHeight) + 'px';

I really do hope the resolution property gets fixed at some point, but for now this is what works for our game on mobile :slight_smile:

2 Likes