Adding a background and basic UI

We're going to start by adding a background, and two text fields to display the score and game time to the player. Open up PlayState.hx, and we'll add some variables.

Inside the class, add the following variables:

private var background:FlxSprite;
private var txtScore:FlxText;
private var txtTime:FlxText;

The background is a FlxSprite object. It is used when you want to display an art asset or a shape drawn by HaxeFlixel. The txtScore and txtTime variables are FlxText objects, and as the name implies, they're used to display text.

After this, go inside the create function and add the following underneath super.create():

background = new FlxSprite();
background.loadGraphic(AssetPaths.gameBackground__png);
add(background);

In those lines, we are creating a new FlxSprite instance in the background variable, loading our background image using the AssetPaths class, and then using the add function to add the background to PlayState. The add function is inherited from the FlxState class, and we'll be using it frequently.

It's also worth noting that the order in which we add things to FlxState is important. This order determines how things will layer visually. So, since we added the background first, it will appear underneath everything else.

Next, to add our two text fields to screen, add these lines:

txtScore = new FlxText(10, 10, 200, "Score: 0", 20);
txtTime = new FlxText(10, 30, 200, "Time: 0", 20);
add(txtScore);
add(txtTime);

We start by creating instances of our two FlxText objects. The constructor for the FlxText object takes many arguments; the ones we're setting here are the x position, the y position, the field width, the initial starting text value, and the font size.

In this case, both fields will be placed in the top-left corner of the screen with a little bit of padding. They will have a field width of 200; they both have starting text values and a font size of 20.

After this, we add both to PlayState.

Now you can run the game to see what we have so far. You can hit the play button in FlashDevelop or use this command-line function:

lime test flash