I realized that there is no need to set the default size in buildsettings, instead, it will be set when we embed the game in the website (like my game in itch.io).
So I override that setting with the screen size (like display.actualContentWidth/Height).
I will update the github link for my template, to make it easier to update.
Updated:
Well, you are talking about defaultViewWidth and defaultViewHeight, but I’m referring to the defaultMode parameter.
I’m not setting it in buildsettings (default is “maximized”, It will get the size of the browser.).
If you set defaultMode as normal or minimized, it keeps the game size with defaultView size.
The thing with your code is that it’s beneficial for it to read the width and height (display.actualContentWidth and display.actualContentHeight) as the dimensions of the browser window, but in certain cases, that behavior is not beneficial (in my opinion). My game is designed for portrait mode, not landscape like the one you have on itch. On mobile, it displays well, but when adjusting to the canvas in the browser, the content appears too large. I’m attaching a screenshot so you can see.
In this screenshot, the board in the center should be larger, but it isn’t because I dynamically created a code to resize it if it exceeds the screen dimensions.
Well, I think you need to make some changes in your project to detect landscape screen size.
Take a look at some game portraits in Poki. It’ll dynamically set GUI to adapt to screen size.
I think that would be the best way, but how would I make all my content appear smaller?
This could be done by changing the width and height dimensions in config.lua, but this configuration cannot be done dynamically, and that is the problem, because I would first need to read the canvas dimensions and then resize the content.
You can put all into a group and scale with screenConfig/screenWidth.
I test with some portrait projects and i put all to container with size portrait.
It works fine both PC and Mobile.
I don’t really know how to do that… screenConfig and screenWidth are not Solar2D commands and javascript neither.
But anyway, let’s say I put all the content in each of my scenes into a group, which wouldn’t really be necessary since all the groups in a scene are already contained within ‘sceneGroup’. If I were to scale the sceneGroup, many of my elements would deviate from their relative positions, as some of my groups have their default anchors, while others have been given different anchor coordinates to have more control over multiple elements at once.
I think you need to redesign your game to suit the HTML5 build.
You can use the resize event and check that if it is an html5 platform, it will reset the values for the top-left, right-down, center position, etc.
display.contentWidth, display.contentHeight will get value in config.lua.
in mobile display.contentWidth/display.actualContentWidth ~= 1.0, but in pc this value will change smaller, you can scale GUI components based on it.
There are definitely changes needed to fit this template in portrait, this is just a version that I tried to change to improve it (mostly guessing).
Thanks for the update! Great to hear the blurry images and low FPS issue is fixed.
Regarding the zooming issue, I’ll check the webtemplate 4 file as you suggested and test it out. Appreciate the info! I’ll let you know if I encounter any other issues.
Looking forward to testing it!
