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?
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.