HaxeFlixel Tutorial – Creating A Simple Text

Today we’re going to create simple texts in HaxeFlixel, using FlxText.

Setup

Let’s begin with a template HaxeFlixel project by using the following command:

As usual, we will begin coding from MenuState.hx file.

Simple Text

Now let’s add a simple text onto the screen. You can refer to the post here (check the links mentioned) or here (FlxText section) on how to add text, but in case you’re lazy, here’s the code:

If you build using lime test neko , the output would look like this:

Screen Shot 2015-03-26 at 10.30.25 AM

Text with custom font

Here’s how to create a text with custom font. We assume your custom font is named “kenvector_future.ttf” and you have put it in your HaxeFlixel project’s assets/data/  folder. You just need to create a new FlxText, and use setFormat()  to update its properties.

And now the output would look like this:

Screen Shot 2015-03-26 at 3.02.04 PM

Note that you can use setFormat  to modify other properties too — check the API for more info.

To further demonstrate how else you can further modify the properties using setFormat , here’s an example:

And here’s the output:

Screen Shot 2015-03-26 at 3.11.23 PM

Text Filters

You can also add filters to texts — check out the possible filters at the API page. The problem a beginner would have with the API is — there isn’t any explanation on how to use it. So, here’s an example:

And here is the result:

Screen Shot 2015-03-26 at 3.29.08 PM

I believe with the setFormat  and addFilter  functions above, you will be able to create texts that suit most of your needs. This concludes the tutorial on creating simple text in HaxeFlixel.