[SOLVED] A rendering problem: text looks sharp but overly pixelated in high-resolution & small-window-size environment (namely, mobile)

[MGTHZ]

[SOLVED]

Sorry guys for wasting your time I'm really dumb, misunderstand the basic concepts about css. Now I turn on the autoDensity option and edit the resize function, everything renders correctly

BTW, I noticed that even if I turn on the autoDensity, whenever I want to render some texts with resolution greater than devicePixelRatio, the pixelation "problem" still exists. I guess this behavior works as intended and it's not a "problem"?

 

This is my original post:

Sorry for the title because I'm not 100% sure what causes this problem, but I believe it should have something to do with resolution (devicePixelRatio) and the logical size (or viewport size / window.innerSize whatever).

I started developing web game using Pixi.js recently and didn't notice the importance of resolution until I tested on the mobile.

At first, the default resolution is 1 and the text looked a bit blurry. So I set PIXI.settings.RESOLUTION = window.devicePixelRatio; Now here comes the problem: the text looks sharp, but overly pixelated like the following screenshot: (And obviously I have already turned on the antialias)

After some inspection I believe that this problem happens when the resolution is high and the window size is small. For example my phone has devicePixelRatio = 3, and the typical window.innerWidth and window.innerHeight is like 350x700.

If I open the webpage with a small window and set the resolution to a very high number on desktop, it produces similar result:

To provide with more information, maybe there's something wrong about my css styling and resize function as well.

It's very simple vue.js app with a <div id="app"> and <canvas> is inside that.

html,
body {
  margin: 0px;
}

body {
  background-color: #2f98d5;
}

#app {
  display:flex; 
  justify-content:center;
  align-items:center;
  height:100vh;
}

#game-canvas {
  display: block;
}

This is the resize function. Basically, I design the layout with a desired width and height (like 1280x720), then scale the renderer and stage based on that.

    resizeAppFn = (contentWidth: number, contentHeight: number) => {
        let resizedWidth = contentWidth / this.renderer.resolution;
        let resizedHeight = contentHeight / this.renderer.resolution;
        if (contentWidth * this.desiredRatio <= contentHeight) {
            // fit width
            resizedHeight = resizedWidth * this.desiredRatio;
        }
        else {
            // fit height
            resizedWidth = resizedHeight / this.desiredRatio;
        }
        this.renderer.resize(resizedWidth, resizedHeight);
        this.stage.scale.set(resizedWidth / this.desiredWidth, resizedHeight / this.desiredHeight);
    };

 

Edited November 25, 2022 by MGTHZ