Hello everyone! I have created a sample project that adjusts to the browser window size. It’s similar to the classic letterbox in Solar2D, but without the black bars, and we can anchor elements to the edges of the browser, which is great for UI placement.
Overall, the development process has not changed drastically. This project can be adapted to other aspect ratios different from letterbox. For example, you can implement “fit width” and “fit height” modes, and so on.
Now, a little bit about what’s under the hood. I obtain the current browser dimensions through JS because display.contentWidth/Height sometimes returns an incorrect size.
I have added styles and meta tags for better behavior of the canvas on the page, including hiding scrollbars when the browser window is resized.
You can set project dimensions through the “config” table, which works similarly to Solar2D’s native config file.
As a bonus, I made the standard “print” function output data to the browser console, and also implemented a function for calling JS code.
Enough talk! I have made it publicly available with the source code. You’ll be surprised how simple it actually is.
Live: https://qugurun.github.io/solar2d/adaptive/html/index.html
Source: https://github.com/Qugurun/Solar2D-HTML5-Adaptive/
I can’t wait to hear your opinion.