We are trying to host the applicaton on our server, with a UI that is not in the canvas itself. There is a slight issue however.
When we are using a layout of 85% - 15% width for 2 divs, and place an iFrame in the first larger div, then point our build’s index.html to this iFrame, the aspect ratio is preserved, the app is present, and via postMessage we can communicate with the application.
This however comes with a performance overhead. Our custom UI is just 2 buttons in CSS/HTML, nothing else. When testing on a weaker device (eg.: mobile phone) the iFrame site is really laggy. If accessing the app’s index.html directly, the lag completely goes away.
So we came to the conclusion of placing our UI and stuff in the app’s index.html, instead of putting that in an iFrame. However we need to resize the canvas itself. When we do a width param on the canvas, or we move the canvas by id into a sized div, the application aspect ratio is not preserved, and the scene is squished from the sides.
How do we resize the canvas, or put it in a custom div, while preserving the aspect ratio?
EDIT:
In the config.json, there is a parameter called “fillMode”, when setting this to “KEEP_ASPECT” instead of “FILL_WINDOW” nothing happens, the scene is still squished. When changing the class directly to KEEP_ASPECT on the canvas, the width becomes 100% instead of the parent div size, thus the size is wrong.
There is one slight issue with this method, that I’m just gonna let go for now.
Basically as it’s setting the resolution for the aspect ratio, if either the width or the height is off, then on the sides of the app, or on the bottom and the top, there is an area, where the background is showing through, so clicking those areas will not rotate the scene, etc. Weirder the resolution, the more apparent. For example:
On my 16:9 screen it’s about 1-1cm on each side. On my 21:9 screen it’s 5-5 centimeters on each side.
I see that you have a github repo that resizes the canvas correctly, so I’m gonna check that out and implement it in my own app, because that seems to solve this issue.
Using your repo, I have implemented an engine-fix and some additional modifications. Fill mode NONE and 100% height on the body, now no matter how weird I scale the window, it’s never squished and all parts of the screen are actually controlling the canvas.
As long as the Fill Mode is None, I believe you can do app.resizeCanvas(); and the engine won’t try to resize the canvas. If that doesn’t work, go back to the patch as that’s ‘known’ to work