search

FormularSumo / Galaxy-Collection-Web

Love.JS Web port of https://github.com/FormularSumo/Galaxy-Collection hosted on GitHub Pages
https://formularsumo.github.io/Galaxy-Collection-Web/
GNU Affero General Public License v3.0
2 stars 0 forks source link

Low resolution on devices which scale web content (Android, iOS, laptops) #2

Open FormularSumo opened 2 months ago

FormularSumo commented 2 months ago

Instead of the device's hardware resolution being used for Love2D/Canvas rendering, its virtual web one is. This means on modern Android/iOS devices it runs at around 1/2-1/4 of the resolution it should and looks really bad. Sometimes even making it hard to use interact with the game eg reading text.

FormularSumo commented 2 months ago

Turns out this is also a problem on some desktop devices (most laptops), just not as noticeable. My laptop has an 1800p tall display, but the css pixels is 900p - which correspond with OS device scaling of 200%. You can see in this recording that the web version (both Firefox + Chrome) is noticeably blurrier than native (even though native is only rendered at 1080p then upscaled).

https://photos.app.goo.gl/vxRHZypGoZ7nSHT39

FormularSumo commented 2 months ago

https://stackoverflow.com/questions/53233096/how-to-set-html5-canvas-size-to-match-display-size-in-device-pixels https://web.dev/articles/canvas-hidipi Seems like the solution. I have yet to get it working yet though, as it seems like love.js is doing some of its own canvas resizing :/

https://web.dev/articles/device-pixel-content-box also exists but is a bit more complicated and doesn't work on Safari yet.