Next what I want is to create several screens (menu and game), transitions between screens (simple fade in and fade out), add preloader with simple progress bar, output background image on menu screen and render some text.
Luxe has built-in state machine, but this state machine is tightly coupled with game lifecycle (eg. can receive
onmousedown, etc.), what makes it sitable for screens and transitions between them. There are several examples which demonstrate how to use states properly.
But these examples have one “feature”…
Each screen add entities to scene, but never removes them. So, for example, when I start from menu screen, than go to the game screen, scene will have entities both from menu and from game. Menu entities will be invisible (
0), but still on scene, still receive update events, etc.
I wrote simple
BaseState, which have it own scene. On leave it fades out every visual on scene, than destroys them and scene itself.
Interesting fact – in opposite to OpenFl where you must manually add sprite to container, luxe automatically adds sprite to default scene (and to batcher, but let’s talk about batchers later). So if you want to add sprite to custom scene, or not to add at all, you must specify that explictly.
OpenFl preloads everything from assets when game starts. In luxe you can preload (or not to preload) what you want at any time. This gives a lot of flexibility.
Parcel (which actually preloads assets) doesn’t display any progress by itself. Instead of you should use
ParcelProgress, or write you own. At time of writing
ParcelProgress has a few flaws:
- Like examples we’ve seen before,
ParcelProgressjust fade out visuals (background, progress border and progress bar), but doesn’t destroy them;
bar_borderoption is ignored, and progress border always have the same color, as progress bar;
- Progress border doesn’t displays on web;
Fortunately, it’s all easy to fix by making your own class which extends
ParcelProgress. Also I add
logo_texture option to my class to be able to display some image while game is loading.
While everything in the game I want to keep inside 800×480 rectangle (which scales to fit window size), background image should fill entire window (keeping aspect ratio).
This can be done by creating another camera with different
size_mode. Also you can’t just attach new camera to sprite or scene, instead of you must create new batcher for this camera, and add sprite to newly created batcher. I will talk more about scene vs batcher sometime later.
At first I take main font from GD2 and use Hiero to convert it to bitmap font. Also I want to use signed field distance effect, and Hiero can do this, but this process it not automated. You must manually tune the necessary parameters. Hopefuly there is manual, which helps to do this (see “Generating the font” section).
Luxe has built-in support for SDF-fonts, so it’s enough to write a couple lines of code and voila:
See you later!