GD2D: dev log #3

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 onmouseup, 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 (opacity = 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.

Preloader

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, ParcelProgress just fade out visuals (background, progress border and progress bar), but doesn’t destroy them;
• bar_border option 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.

Background image

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.

Text

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!