[SOLVED] UI is blurry on mobile

Help & Support
1

Hello,
It doesn’t matter if I use 1024px or 128px, my Icons always look blurry on mobile.
Enabling Device Pixel Ratio is not an option as it absolutely decimates iOS performance (at least in our game).

Is there some special technique to not make it look as blurry? It’s a simple 2d image, how can it be that hard?

2

If you aren’t using device pixel ratio for performance issues, then the only way I see getting better results is using HTML/CSS for your UI.

HTML will always render in the DPI of the display, just make sure your images/graphics can match that resolution.

3

I hate working with HTML and CSS :frowning:

but I guess it can’t be helped…

1 Like
4

You could set device.maxPixelRatio selectively based on device. So, for example, cap it between 1 and 2. You should absolutely not set it to 1 for device like iPhone X and above. They have very powerful GPUs. Consider using device resolution as the check to kick older iOS devices down to a lower maxPixelRatio value.

In short - don’t just set it to the same value that works on all phones. Set it intelligently to get the best balance everywhere.

2 Likes
5

You might also consider importing your images with Textures POT (Powers of Two) turned off. Your icons will show more aliasing, but they will have higher detail contrast. Depending on the graphics, this may be a trade-off worth living with.

Note also that this option is only in effect during the import of the image. So you can apply Textures POT selectively if that suits you.

6

This is quite the daunting task, given all the mobile options out there. Maybe there should be an option that does this automatically from the menu. Or even better: I am kind of interested why textures - especially used as icons - look so damned blurry in the first place. This has to be some kind of hiccup in the engine, no? How does a 1024x1024 picture look like it’s an upscaled 32px texture with AA? Textures look fine if I put them on a simple Plane or as a Skybox so how can’t they look fine when I put them on a UI Element? Like, whats the difference?

8

It shouldn’t look as you describe, specially if it is 1024x1024. Perhaps, you could give a screenshot? I am using less than 100x100px for my icons and they look crisp:

image

1 Like
9

If you can provide an example, that would be great. I’ve tried using a plane and UI image element but couldn’t see any difference in rendering on my Pixel 2 XL: https://playcanvas.com/editor/scene/875364

10

Sorry, I currently got my hands full! I’ll provide an example later this evening, thanks for helping me out btw!

11

It’s not that daunting. I mean, just refer to something like this:

https://ios-resolution.com/

You could do something like:

if (pc.platform.ios) {
    var w = this.app.graphicsDevice.width;
    var h = this.app.graphicsDevice.height;
    var numPixels = w * h;

    var lowRes = 1136 * 640;
    var highRes = 2048 * 1536;

    if (numPixels <= lowRes) {
        this.app.graphicsDevice.maxPixelRatio = 1;
    }

    if ((numPixels > lowRes) && (numPixels <= highRes)) {
        this.app.graphicsDevice.maxPixelRatio = Math.min(window.devicePixelRatio, 1.5);
    }

    if (numPixels > highRes) {
        this.app.graphicsDevice.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
    }
}

On Android, you can inspect the this.app.graphicsDevice.unmaskedRenderer string to get the GPU name which is even better for choosing resolution.

But ultimately, @LeXXik and @yaustar are indicating, maybe something else is the source of your troubles here.

2 Likes
12

@will where is debugRenderer defined in the engine?

It doesn’t seem to work and I couldn’t find it in the engine repo. Maybe you mean the following (though it still returns an empty WEBGL_debug_renderer_info object on my machine)?

this.app.graphicsDevice.extDebugRendererInfo;
13

@Leonidas Sorry, my mistake, I’ve fixed it.

1 Like