This time I should chose tool to convert vector fonts into bitmap ones (with distance field support), than I should choose base screen resolution and render something on the screen.
I already know about bmGlyph and Glyph Designer, so I download demo versions and try them.
While both tools seems to be great, unfortunately they doesn’t support distance field effect. Signed distance field is well known font rendering technique by Valve (introduced in 2007), which allows to render big-sized glyph using small-sized font texture. Today there are newer techiques, such as Multi-channel signed distance field, which give much better results, but luxe doesn’t support them out of the box.
I asked for tool in OpenFl slack channel (ironically, asking about tool for luxe engine in OpenFl channel). They advised to use Font Forge. I used Font Forge before (to convert fonts between .otf and .ttf), and never know that it can convert vector font to bitmap font, and moreover with distance field effect… Actually I don’t try it 🙂 So it is up to you to try it.
At the same time I found another tool named Hiero. This tool is written in Java, so it is cross-platform. And it can use distance field effect.
Base resolution
Actually I chosing aspect ratio, that will cover most of devices. After some time of googling, I found following site, which have list of devices and screen sizes.
I export all data from the site (by Ctrl+C / Ctrl+V), than calculate aspect ratios for every resolution (eg. 1080×1920 has 9:16 aspect ratio). Than I wrote simple PHP-script, that reads that data, compute rating for every aspect ratio (more devices – more rating), and chose average resolution.
It is 5:3. And resolution will be 800×480 (mainly because I have several backgrounds from GD in this resolution).
Rendering
I can’t hardcore window size to 800×480, because I want to publish this game to Android and iOS. So basically window can be any size. But I want to use 800×480 in the code, and than upscale / downscale image to fix actual window size.
Luxe engine has Camera concept for this. You can specify camera size and size mode.
Luxe.camera.size = new Vector(app.game_config.window.width, app.game_config.window.height);
Luxe.camera.size_mode = SizeMode.fit;
BTW, you can have several cameras (I will need it later).
Default backgroud color
You can specify clear color during config phase in config function using config.render.default_clear, and it change clear color in snow (on which luxe is based), but has no effect on luxe renderer. To change default background color in luxe you should use
Luxe.renderer.clear_color = new Color(0.0, 0.0, 0.0, 0.0);
See you later!