Hi Everyone,
I am trying to figure out how to fix the issue of making the UI looks sharp and crisp in mobile browser in which unfortunately I haven’t got any success yet.
I tried with “Device Pixel ratio” option which fixes this issue but it drops the framerate significantly. So it is not an option.
So I was wondering if there any other way to make UI look better without writing HTML or CSS?
Any help is appreciated.
Thanks
Hi @kunal_joshi,
Check this article, device pixel ratio when enabled by default will be set to the maximum value. That can indeed kill performance in many mobile devices. You can set yourself lower values that render a crisp interface too:
https://developer.playcanvas.com/en/user-manual/optimization/runtime-devicepixelratio/
Hi @Leonidas
Actually i enabled the “Device Pixel Ratio” but somehow it causes issue with the joypad functionality i had in the game(other than frame rate drop issue). So i was left with no other choice but to remove it.
So I am wondering if there is any other solution available which I can try.
Well, you will have to use it one way or the either to increase the rendered resolution and avoid blurry images.
Your joypad most likely doesn’t account for the device pixel ratio when calculating touch location, so you will have to update the code to take it into account. You may be able to find a number of posts on the subject, on how to consider device pixel ratio when calculating input.
You can try something like this where you render the world to a lower resolution texture but the UI at native resolution
https://developer.playcanvas.com/en/tutorials/resolution-scaling/
However you may still run into fill rate issues
