UI appears Blurry on Desktop

Hey guys,

I am setting up a game, and while setting up I am noticing that the UI appears blurry on desktop while on mobile it appears correct as I have ticked the device pixel ratio:
https://playcanv.as/b/FuWIRUWQ/

Project:
https://playcanvas.com/editor/scene/955316

It looks fine on my screen here:

As a side note, the original asset 1200px wide.

If it’s sized to be bigger than that on screen, then it’s going to look blurry as it will be scaling up.

1 Like

Same logo in HTML as compared to the Playcanvas UI system.


While in the editor the image is displayed correctly. when I play it, it appears with white artifacts like above.

I can confirm the issue, the image is correctly rendered in editor but on the launch window it has white artifacts.

2 Likes

I am not sure why the difference between the editor/launch windows, but it seems the cause for the white artifacts is severe downsampling (going from 2000+ pixels down to to 244).

I’ve resized and reuploaded the image to 488x358 and it now seems to be rendering correctly on launch:

To be fair, doing a scale down in an image editor on bilinear, it looks just as bad?

image

I’ve used photopea.com (little photoshop) and it seems to be re-sampling it quite right (this after):

Stripped the project down to make it easier: https://playcanvas.com/editor/scene/955378

I have also checked the other logos they seem to be like this too i. e something about the edges is strange. Should I down sample them all?

You should scale them down for many other reasons as well, like download size and vram they occupy.

No need to have that big images if not truly needed.

1 Like

I try to follow up with the team tomorrow as I’m interested in the reason behind this. :thinking:

3 Likes

Checked with the team. The linear filtering on textures can only really handling up/down ~50% before it starts skipping pixels. This means that Leonidas fix by downsizing the images to be closer to the size that will be displayed.

2 Likes