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:
|
1 |
flixel tpl -n "MyTextTest" |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
package; import flixel.FlxState; import flixel.FlxG; import flixel.FlxSprite; import flixel.text.FlxText; class MenuState extends FlxState { override public function create():Void { super.create(); // Set the background color for visibility sake FlxG.camera.bgColor = 0xFF999999; // For illustration purpose, show a 150-width box // behind the text. var box = new FlxSprite(100, 50); box.makeGraphic(150, 150, 0x99FF0000); add(box); // Add a basic text. Note how the text auto-wraps when // it exceeds the width, which we set as "150" below. var text = "The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."; var myText = new FlxText(100,50,150,text,12,false); add(myText); } override public function update():Void { super.update(); } override public function destroy():Void { super.destroy(); } } |
If you build using lime test neko , the output would look like this:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
package; import flixel.FlxState; import flixel.FlxG; import flixel.FlxSprite; import flixel.text.FlxText; class MenuState extends FlxState { override public function create():Void { super.create(); // Set the background color for visibility sake ... // For illustration purpose, show a 150-width box // behind the text. ... // Add a basic text. Note how the text auto-wraps when // it exceeds the width, which we set as "150" below. ... // Add a text using custom font. var myCustomText = new FlxText(300,50,150,text,12); myCustomText.setFormat("assets/data/kenvector_future.ttf"); add(myCustomText); } ... } |
And now the output would look like this:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
override public function create():Void { super.create(); // Set the background color for visibility sake ... // For illustration purpose, show a 150-width box // behind the text. ... // Add a basic text. Note how the text auto-wraps when // it exceeds the width, which we set as "150" below. ... // Add a text using custom font. ... // Add a text with default font, but added properties. var myFancyText = new FlxText(100,250,150,text,12,false); myFancyText.setFormat(null, 12, 0xFF00FF00, "right", FlxText.BORDER_SHADOW, 0xFF0000FF); myFancyText.borderSize = 8; // mess around with the shadow border size add(myFancyText); } |
And here’s the output:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
override public function create():Void { super.create(); // Set the background color for visibility sake ... // For illustration purpose, show a 150-width box // behind the text. ... // Add a basic text. Note how the text auto-wraps when // it exceeds the width, which we set as "150" below. ... // Add a text using custom font. ... // Add a text with default font, but added properties. ... // Add a text with filter var myFilterText = new FlxText(300,250,150,text,12,false); myFilterText.addFilter(new flash.filters.BlurFilter()); add(myFilterText); } |
And here is the result:
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.