Why is scale pixelated for Feathers UI scaffolded project when web debugging?

1

So I did basically nothing, just scaffolded a new Feathers UI project with the CLI and changed the project settings a bit:

<window fps="60" width="800" height="450"/>

I want to have a fixed size for my app and I want it to scale with the optimal ratio, fitting into any window size. When I debug the project in the browser, the label shows blurry in a scale > 1:

var label = new Label();
label.text = "Hello World";
addChild(label);

I found out you can do this in the project settings:

<haxedef name="dom" if="html5" />

However this option will disable the proper scaling I mentioned above. Anything I can do?

2

I would avoid setting width and height in <window/> in project.xml when targeting html5. It may cause OpenFL to render at a lower resolution than it will be displayed at, which will look blurry, as you’ve discovered.

Try using the LetterboxScaleManager instead. OpenFL will render at full resolution, but the Feathers UI Application component scales itself to your optimal ratio, no matter the size of the window.

var letterbox = new LetterboxScaleManager(800.0, 450.0);
app.scaleManager = letterbox;
2 Likes