Jump to content

Blurry sprite image depending on device resolution?


Recommended Posts

Hiya, I have a resolution problem and I'm trying to understand what's going on. Basically I have a simple Pixi app that renders an image as a sprite (on a grey canvas). But I find the quality of that image changes drastically depending on what screen resolution the app is viewed on. I understand the basics of resolution, scaling, pixels etc but can't wrap my head around the issue or the proper fix.

When viewed on a 4k screen, the image renders nicely and the text is clear (see picture 1), but when I view the canvas on a 1080p screen, it gets blurry and aliased (see picture 2). It will also blur of I set the scale of the 4k screen high (like 200%) in windows.

I am using pixi-viewport to zoom in and out, so these comparisons were taken with the image at a similar zoom level.

I am rendering the sprite at a fixed width and height of 1191x842 (basically a3 aspect ratio). It is also the res of the core image file. This is still high enough to be clear when viewed on the 1080p screen with a normal photo viewer.

I have tried playing with the canvas resolution, setting it more or less than window.devicePixelRatio, changing the size of the sprite to higher and lower, changing the size of the canvas itself, but nothing seems to fix the blur on lower res screens reliably.

Should also mention that when I zoom in, the blur/aliasing goes away, and the text clears up. It's only when zoomed out that it appears.

Any help is appreciated, I feel like there is a gap in my understanding of how resolution/scale is handled with Pixi.1.thumb.png.33026fa056d2ae0f0b8aabfe34bb1527.png2.thumb.png.89cd434a4c6e0631e28d959910c8d6e2.png

Edited by imbiss41
more info
Link to comment
Share on other sites

8 minutes ago, znw-test said:

Have you ever tried setting resolution to twice devicePixelRatio

const app = new PIXI.Application({
  width: canvasWidth,
  height: canvasHeight,
  backgroundColor: 0x1099bb,
  resolution: 2 * window.devicePixelRatio,

Hey, yeah I have tried all kinds of different values for it. 2x, 10x, 0.5x, it affects things in other ways but doesn't affect the blur specifically

Link to comment
Share on other sites

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.

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.


  • Recently Browsing   0 members

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