Rendering resolution very low on mobile

Help & Support
1

I need to make the game to work both on desktop and mobile.

If I set the resolution to Auto, it looks very nice and sharp on desktop, but on my Android HD screen (1920 x 1080) it looks super blurred as low resolution.

Instead, if I set a fixed resolution at 1280x720 it looks good on mobile, but very pixelated on desktop that has a much higher resolution (2560 x 1440).
What resolution is actually taking with Auto?
By inspecting the page the value of pc.app.graphicsDevice.clientRect is just 640 by 360. Is this? Why?

Also, if I set the option use device pixel ratio it uses the 1920 x 1080 resolution but is too slow.

2

Do you have ‘Device Pixel Ratio’ enabled or disabled? Is the desktop using scaling or 1:1 pixel resolution?

3

No I’m not using it as it’s too slow on mobile. But as stated before when is set the resolution is correct.
I don’t know what you mean about the scaling on desktop. If you mean the zoom of chrome with ctrl/cmd +/- no I don’t scale the web page.

4

You have to set a maxPixelRatio on the graphics device that is larger than one but not as large as the device pixel ratio if that’s too slow on your target device.

Basically a phone will have a certain resolution but its pixel ratio actually allows it to render more pixels in the same resolution. So you have to measure performance using various pixel ratios or have code that adjusts the pixel ratio dynamically if fps is consistently low.

1 Like
5

Thanks, I managed to implemented this way, but I have to guess the ranges I can use.
For example on my S4 I have a value of 3 as window.devicePixelRatio and if I set maxPixelRation to anything below 2 the resolution is too bad for texts.
There is a way to handle it better? Like relating this to a minimum dpi?

6

Well really it depends on the hardware of the device. With the pixel ratio that these devices support, if you use their native pixel ratio it’s essentially asking the device to render a huge resolution that even desktop computers would struggle with. So it’s not easy to fix this you have to do tests on a number of target devices and set your maxPixelRatio accordingly and of course read this guide https://developer.playcanvas.com/en/user-manual/optimization/guidelines/ .

1 Like
7

I know this subject has aged now, but perhaps it will help future developers who arrive here via a Google search (just like me):

What solved it for me was:

  • Click on the Configuration Icon.
  • Select the RENDERING tab.
  • Then search for Resolution Mode and change it from Auto to Fixed.

This adjustment ensured that the entire application displays the intended resolution across all different devices.