There are certain problems with displaying fonts, especially when you have different mobile devices with different resolution. Of coures the priority is that it should look nice on every device so you have to make a custom one that will be held in the bitmap spritesheet. You can create them relatively easily using specific software.
Still you have to create many sizes of fonts and know when to use them (according to screen size).
In this article I will try to show how to use simple methods to create a custom font and use it in your LibGdx project.
First of all we need to create a sprite font. I found some software for that but actually none of them was fully compatible with LibGdx.
1) LibGdx users wiki recommend Hiero. It has really nice graphic user interface where you can choose any font installed on your OS (or upload one from the file), change it’s size and position of the signs in sprtesheet and even add some effects to it (definitely an advantage). You have a nice preview of the font visible all the time and it’s capable of saving the font into the most libGdx friendly format *.fnt + *.png.
But still – it sometimes divides *.png spritesheed into many files and LibGdx wasn’t able to read the text properly.
I’ve read that Hiero is “old fashioned” and that we should find something else. So since I couldn’t get this font to work I found something else.
2) Someone from LibGdx community recommended SpriteFont 2. It also has pretty nice GUI and can preview your font. Actually is has ever more options than Hiero and also more effects with easy gui. The only disadvantage is it saves font into *.xml + *.png. It’s nice for XNA programmers but I couldn’t get it to work on my version of LibGdx.
3) The software I found the most useful was Bitmap Font Generator. Unfortunately it’s interface wasn’t clear at first and it requires a little bit of knowledge to operate but it’s nothing you can’t learn in 5mins. Bitmap Font Generator can save in many formats ike *.png, *tga, *xml, *fnt, and you can specify the size of the file (remember for LibGdx width and height have to be the power of 2). Of course there were some problems with it too. I couldn’t get outline effet to display properly. I ended up adding it in photoshop and it works perfectly.
When you have your font prepared and it looks the way you want it, time to import it to your project. I assume you are building Android application, so I will be writing everything as for Android.
So first of all, you need to import your font into Eclipse. For some unknown for me reason your font files have to be in assets folder in your android project and also in data folder in your main project. To get this to work I just link assets folder to the main project and put data folder inside it. Of course it’s not enough so I have to store a copy of my font inside both data and assets folder. If someone know better solution, please let my know in comments.
Time to code!
All you have to do is to initialize your BitmapFont variable and you are ready to go.
spriteBatch = new SpriteBatch(); font = new BitmapFont(Gdx.files.internal("data/nameOfFont.fnt"), Gdx.files.internal("data/nameOfFont.png"), false);
Then to print it on the screen (put it in your Render method):
spriteBatch.begin(); font.setColor(1.0f, 1.0f, 1.0f, 1.0f); font.draw(spriteBatch, "some string", 25, 160); spriteBatch.end();
There is also nice tutorial I’ve heard of but didn’t try: HERE
And if you want to read some more about how to load fonts from files, try THIS