Hi! When using the mobile virtual gamepad feature, I noticed that my game was looking pretty blurry on my phone, and seems to have a small canvas resolution.
Here's what the game looks like on my PC's browser. My monitor has resolution 3840x2560. And window.innerWidth and window.innerHeight are drawn in the center of the game.
And here's on my mobile browser. My phone has resoultion 2280x1080.
A friend suggested that this might be because window.devicePixelRatio isn't being incorporated into the calculations. We tried out a quick hack in the engine's code, multiplying the size of mainCanvas by window.devicePixelRatio, and it seemed to lessen the blurriness, but also caused other scaling issues such as the camera being zoomed in to far, etc.
Is this a known issue with mobile support? Or, perhaps there are LittleJS games out there that do have a proper large canvas resolution on mobile, and there's something wrong on my end in some way? Thanks, would appreciate any help here!
Hi! When using the mobile virtual gamepad feature, I noticed that my game was looking pretty blurry on my phone, and seems to have a small canvas resolution.
Here's what the game looks like on my PC's browser. My monitor has resolution 3840x2560. And window.innerWidth and window.innerHeight are drawn in the center of the game.
And here's on my mobile browser. My phone has resoultion 2280x1080.
A friend suggested that this might be because window.devicePixelRatio isn't being incorporated into the calculations. We tried out a quick hack in the engine's code, multiplying the size of mainCanvas by window.devicePixelRatio, and it seemed to lessen the blurriness, but also caused other scaling issues such as the camera being zoomed in to far, etc.
Is this a known issue with mobile support? Or, perhaps there are LittleJS games out there that do have a proper large canvas resolution on mobile, and there's something wrong on my end in some way? Thanks, would appreciate any help here!