Jump to content

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


MGTHZ
 Share

Recommended Posts

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

imgpsh_fullsize_anim.jpg.b3eca071107f97fd23a6dff8e850ed21.jpg

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:

223416038_Screenshot2022-11-25151059.png.316be8d818a58ddde7bca74f37c3c011.png

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 by MGTHZ
Link to comment
Share on other sites

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...