How to set initial size of OpenFL window on native targets, while allowing the html5 target fill the entire browser window?

Question

In my OpenFL project.xml file, I set the initial dimensions of the window:

<window width="960" height="640"/>

This works great on native targets (windows, mac, linux, hl, and neko). The window is initially 960x640, and it can be resized by the user by dragging the corner. However, with the html5 target, my graphics look blurry, and OpenFL is letterboxed with black borders when the user resizes the browser window. Additionally, the OpenFL stage doesn't dispatch Event.RESIZE when the browser window is resized.

How do I ensure that it can be resized on the html5 target like other targets?

Answer 1

Setting the window's width and height on OpenFL's html5 target causes it to scale to fit the available space, but only visually. It maintains the original dimensions internally. This can cause blurry graphics from GPU smoothing, and it prevents your project from being able to utilize all of the available space in the window. However, for other targets, setting the width and height in project.xml affects the initial window dimensions only, while allowing the stage to resize automatically when the window is resized.

You can adjust your project.xml file to exclude the window width and height from only the html5 target, while keeping it for other targets.

<window width="960" height="640" unless="html5"/>