Libgdx with Android For Game Dev
Game Dev Tutorial : Add Fonts to Game Screen: Customized Fonts
Game Dev -All Game Dev Tutorials
Customized fonts can add appeal to your mobile game screens, and you can mix and match the fonts as you like. There are lots of websites where you can download free fonts to use in your mobile games. Two established websites for custom fonts are: dafont.com, and, fontspace.com. They have a large selection of fonts for just about any genre.
In this tutorial we are going to add some customized fonts to our game screen, with the BitmapFont class member of Libgdx. In our previous tutorials, we used the default game font of Libgdx, which we also implement with BitmapFont. It is a built in font(size 15), so it is easy to load, and it can be styled with color, and scaled. However, this default font has a limitation. It does not look good if we scale it to a larger size on our game screen. So, with a scale of 1, 2 or 3 it looks good(5.8 screen size), however, once we scale it larger, it does begin to distort.
Customized fonts are better suited to mobile game screens, because they are pre-sized, pre-colored, pre styled, and can also be scaled if need be. Because they are already styled, we can easily add them into code of any game screen.
Customized fonts are however, a tad more time consuming to prepare before we code them. Because Libgdx doesn't include or offer these customized fonts, we must find them on the web. You can buy customized fonts, but they can also be downloaded from many websites for free. The two websites I mentioned have a large selection of free custom fonts, but there are many smaller websites that offer them as well.
To select a customized font from the web, there are specific file types to use - ttf, and otf. True Type Font and Open Type Font, are most often found on the 'free to download' websites for fonts. Unfortunately, with Libgdx, when implementing a BitmapFont type, the 'ttf' and 'otf' file types are not supported. So, we must convert them into 'fnt' type, which is supported by the BitmapFont class member we are going to use.
To convert a ttf or otf to fnt type font, we must use an online converter that converts ttf to fnt file type. Look for free online ones, which can provide the two required files; example names- myfont.fnt, and myfont.png. Once converted, we should get 2 file types, the myfont.fnt has the metadata, and the myfont.png, has the letters and numbers for the customized font.
This next image shows the letters and numbers from the 'dino42.png', one of the fonts we are coding. This png image contains all the glyphs, and the metadata file has all the coordinates of how to locate them, and their size and color.
This next image shot, shows the metadata for the file 'dino42.fnt. At the arrow see the name of the png file added. Now, when we load the 'dino42.fnt', with our code call; the 'dino42.png' will be called also, and we can get our customized font for the game screen.
Note: When coding our customized font, we ONLY load the dino42.fnt file, we don't load the png file. Instead, we link to the png file from the dino42.fnt file. That is why it is important to check that the name in the dino42.fnt file, matches the actual name of the png image file, which in this example is: dino42.png
Note: If you convert your ttf or otf file, and get a .fnt file that you cannot open, then it may have converted the metadata info into Binary and not text; and probably won't work with the BitmapFont of Libgdx. So, look for a font converter that will convert the metadata file into text format.
Resources and Tools
TTF vs OTF Font Types How They Differ and Where to Use Them
Online and Free ttf/otf to fnt Converter Converts to metadata(text) and png files that are required. Also has color and size options available. I have used this converter.
BitmapFont Creators List of Paid and Free Tools for BitmapFont
All code for this tutorial is at the Example Code section on this page. At App Shot, see the video gif for this tutorial.
FYI: The code from this game dev tutorial is compatible with Android Studio with the Libgdx component. Read more about Android Studio and Libgdx Here
Click Create; Game Fonts game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.
App Shot - Portrait 5.8" Game Screen
App Shot - Game Fonts
Imports and Game Class - At imports we include the standard imports, and also, those that pertain to the methods and classes we are using in this tutorial: so, we add:
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.BitmapFont.BitmapFontData;
import com.badlogic.gdx.graphics.g2d.BitmapFont.Glyph;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
These are required because we are coding a BitmapFont class member.
Variables At variables, we include the class members and then our named variables for them. So, for this tutorial, we include: Spritebatch, Viewport, Camera; and for our customized fonts we must code four class members for BitmapFont; one for each customized font we are adding, and one BitmapFont for the default game font we are also including. Once we add the class members we give a variable name for each of them, as shown in this next image of our game code. You can name your variables as you want. The code at BitmapFont font; is for our default font. The other three fonts I named them based on their actual size, so one is 62 font size, one is 52 font size, and one is 42 font size.
Create - At create method, we include the new instances of all the class members we are coding for this tutorial, as shown in this next image of our game code. Also here, we load all of our custom font files. This code:
new BitmapFont(Gdx.files.internal("dino42.fnt"));
myFont42.setScale(1.8f);
loads our fnt file; we just include their file name to load them into code. The words Gdx.files.internal in the code, mean this file will automatically load from the assets folder of our app project. We can also set a scale factor for our font. Here, at dino42.png, we used, 1.8f, meaning it is scaled 1.8x the original loaded size. For the default bitmapfont, we don't have to load a fnt file or a png file because we are using the font that is included with Libgdx. So all we have to do is create a New instance of BitmapFont in the create method. Then we give it a scale factor and color.
Because the custom fonts are all of different sizes, I scaled each of them so they would all display at about the same size on the game screen(see at app shot vid). For this tutorial, we are using a 5.8" screen size. If I had not scaled them, then each font would draw to the screen based on their original actual size. Then, they would look like this next appshot of the game screen.
The largest custom font is at the top of screen - size 62, followed by the next smallest - size 52, and then the next one is size 42, and lastly, the default font which is really small, compared to the other three fonts. The default bitmapfont is only 15 in size. And, 15 is the largest size the default font does display on the game screen without scaling it. It would look a tad larger if I had of scaled it, however, this default font cannot be scaled much before its' aspect is compromised. At a scale of 2, it looks good(on my mobile screen - 5.8"), any additional scaling, it just doesn't look proper. Custom fonts are much better suited to the game screen, because they can be pre-selected for various size, color, and style.
The default bitmapfont(15 font size), had to be scaled 5x to be at about the same size as the other three fonts, as shown here in its' code:
font = new BitmapFont();
//original font size 15
font.setScale(5.0f);
font.setColor(Color.BLACK);
With default bitmapfont, we have to set its' scale and color, however, with custom fonts, we can load pre-sized, and pre-color fonts, and unique styles are available also. The default system font is useful, but better for small text scenarios, and where stylish fonts are not necessary.
Render - At render method, we first clear the game screen, and then set our new screen color. If we are including more than one game screen, we also can set individual colors for each game screen, or have them all the same color. Either or, all game screen colors are set in the Render method. For multiple game screen colors, we can easily implement the 'switch' case function, to show the correct screen color for the game screen we are currently displaying.
Render method, is where we draw our game graphics to the screen. So this would include images, fonts, game characters, and the like. If we are using Stage, we can draw them to stage with the 'stage.draw()' code call, otherwise, we can draw them with batch.
For this tutorial, Game Fonts, we are only drawing our fonts to the screen, and for that we will use Spritebatch, as shown in this next image of our code. We are using the word 'batch', here because we named our Spritebatch(class member) variable as batch. Spritebatch batch;'. We draw each font to the screen in this method, and set their text, and give them each a x,y position on the game screen. X is for width, and Y is for height on the game screen. We must include batch.begin(), and batch.end(), when we draw our game fonts to the game screen.
And, at this code; for our default BitmapFont; we include:
font.draw(batch,"Game Font, default font",37,280);
We also set the text we want for the game screen, and set its' position with the x and y values.
Dispose - At dispose method, we get to dispose of all our game assets, to keep our game performance at its' best. If using Stage, we can dispose of all assets at once, with 'Stage.dispose();' code call, otherwise we can dispose of each variable directly. In this tutorial - Game Fonts, we are not using Stage of Scene2d, so we will dispose of each asset directly(separately), as shown here. To note, we do have to dispose of the default game font also, with font.dispose()
//dispose of the fonts
batch.dispose();
myFont62.dispose();
myFont52.dispose();
myFont42.dispose();
font.dispose();
Custom fonts can also blend with the theme of your mobile game. These next images show some examples of custom fonts that can be easily matched with a particular game genre.
Game Dev -All Game Dev Tutorials
App Project Name: Game Fonts
Customized fonts can add appeal to your mobile game screens, and you can mix and match the fonts as you like. There are lots of websites where you can download free fonts to use in your mobile games. Two established websites for custom fonts are: dafont.com, and, fontspace.com. They have a large selection of fonts for just about any genre.
In this tutorial we are going to add some customized fonts to our game screen, with the BitmapFont class member of Libgdx. In our previous tutorials, we used the default game font of Libgdx, which we also implement with BitmapFont. It is a built in font(size 15), so it is easy to load, and it can be styled with color, and scaled. However, this default font has a limitation. It does not look good if we scale it to a larger size on our game screen. So, with a scale of 1, 2 or 3 it looks good(5.8 screen size), however, once we scale it larger, it does begin to distort.
Customized fonts are better suited to mobile game screens, because they are pre-sized, pre-colored, pre styled, and can also be scaled if need be. Because they are already styled, we can easily add them into code of any game screen.
Customized fonts are however, a tad more time consuming to prepare before we code them. Because Libgdx doesn't include or offer these customized fonts, we must find them on the web. You can buy customized fonts, but they can also be downloaded from many websites for free. The two websites I mentioned have a large selection of free custom fonts, but there are many smaller websites that offer them as well.
To select a customized font from the web, there are specific file types to use - ttf, and otf. True Type Font and Open Type Font, are most often found on the 'free to download' websites for fonts. Unfortunately, with Libgdx, when implementing a BitmapFont type, the 'ttf' and 'otf' file types are not supported. So, we must convert them into 'fnt' type, which is supported by the BitmapFont class member we are going to use.
To convert a ttf or otf to fnt type font, we must use an online converter that converts ttf to fnt file type. Look for free online ones, which can provide the two required files; example names- myfont.fnt, and myfont.png. Once converted, we should get 2 file types, the myfont.fnt has the metadata, and the myfont.png, has the letters and numbers for the customized font.
This next image shows the letters and numbers from the 'dino42.png', one of the fonts we are coding. This png image contains all the glyphs, and the metadata file has all the coordinates of how to locate them, and their size and color.
This next image shot, shows the metadata for the file 'dino42.fnt. At the arrow see the name of the png file added. Now, when we load the 'dino42.fnt', with our code call; the 'dino42.png' will be called also, and we can get our customized font for the game screen.
Note: When coding our customized font, we ONLY load the dino42.fnt file, we don't load the png file. Instead, we link to the png file from the dino42.fnt file. That is why it is important to check that the name in the dino42.fnt file, matches the actual name of the png image file, which in this example is: dino42.png
Note: If you convert your ttf or otf file, and get a .fnt file that you cannot open, then it may have converted the metadata info into Binary and not text; and probably won't work with the BitmapFont of Libgdx. So, look for a font converter that will convert the metadata file into text format.
Resources and Tools
BitmapFont Creation and Conversion
TTF vs OTF Font Types How They Differ and Where to Use Them Online and Free ttf/otf to fnt Converter Converts to metadata(text) and png files that are required. Also has color and size options available. I have used this converter.
BitmapFont Creators List of Paid and Free Tools for BitmapFont
All code for this tutorial is at the Example Code section on this page. At App Shot, see the video gif for this tutorial.
FYI: The code from this game dev tutorial is compatible with Android Studio with the Libgdx component. Read more about Android Studio and Libgdx Here
Create our Game App Screen
We are creating a new app for this tutorial. First, we must create our new mobile game app, so in AIDE, at the AppProject file hierachy, Choose Create New Project, select Mobile Game, and New Mobile Game; then add the App name, Game Fonts(Note: no spaces in the app name(can use _ ), or you can add spaces after you create it; Just Goto: the 'AppProject' folder; just select the App Name, and then select rename). Next, add the package name, 'com.aac.font_examples'.Click Create; Game Fonts game app is created, and the MyGdxGame.java page opens in your AIDE coding editor.
For more info on navigating files and using the AIDE coding editor, goto Tutorial 1.
App Shot - Portrait 5.8" Game Screen
App Shot - Game Fonts
Code For This Tutorial
For this tutorial, we must include the imports, game class, class members(with variables), create method, render method, dispose method.Imports and Game Class - At imports we include the standard imports, and also, those that pertain to the methods and classes we are using in this tutorial: so, we add:
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.BitmapFont.BitmapFontData;
import com.badlogic.gdx.graphics.g2d.BitmapFont.Glyph;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
These are required because we are coding a BitmapFont class member.
Variables At variables, we include the class members and then our named variables for them. So, for this tutorial, we include: Spritebatch, Viewport, Camera; and for our customized fonts we must code four class members for BitmapFont; one for each customized font we are adding, and one BitmapFont for the default game font we are also including. Once we add the class members we give a variable name for each of them, as shown in this next image of our game code. You can name your variables as you want. The code at BitmapFont font; is for our default font. The other three fonts I named them based on their actual size, so one is 62 font size, one is 52 font size, and one is 42 font size.
Create - At create method, we include the new instances of all the class members we are coding for this tutorial, as shown in this next image of our game code. Also here, we load all of our custom font files. This code:
new BitmapFont(Gdx.files.internal("dino42.fnt"));
myFont42.setScale(1.8f);
loads our fnt file; we just include their file name to load them into code. The words Gdx.files.internal in the code, mean this file will automatically load from the assets folder of our app project. We can also set a scale factor for our font. Here, at dino42.png, we used, 1.8f, meaning it is scaled 1.8x the original loaded size. For the default bitmapfont, we don't have to load a fnt file or a png file because we are using the font that is included with Libgdx. So all we have to do is create a New instance of BitmapFont in the create method. Then we give it a scale factor and color.
Because the custom fonts are all of different sizes, I scaled each of them so they would all display at about the same size on the game screen(see at app shot vid). For this tutorial, we are using a 5.8" screen size. If I had not scaled them, then each font would draw to the screen based on their original actual size. Then, they would look like this next appshot of the game screen.
The largest custom font is at the top of screen - size 62, followed by the next smallest - size 52, and then the next one is size 42, and lastly, the default font which is really small, compared to the other three fonts. The default bitmapfont is only 15 in size. And, 15 is the largest size the default font does display on the game screen without scaling it. It would look a tad larger if I had of scaled it, however, this default font cannot be scaled much before its' aspect is compromised. At a scale of 2, it looks good(on my mobile screen - 5.8"), any additional scaling, it just doesn't look proper. Custom fonts are much better suited to the game screen, because they can be pre-selected for various size, color, and style.
The default bitmapfont(15 font size), had to be scaled 5x to be at about the same size as the other three fonts, as shown here in its' code:
font = new BitmapFont();
//original font size 15
font.setScale(5.0f);
font.setColor(Color.BLACK);
With default bitmapfont, we have to set its' scale and color, however, with custom fonts, we can load pre-sized, and pre-color fonts, and unique styles are available also. The default system font is useful, but better for small text scenarios, and where stylish fonts are not necessary.
Render - At render method, we first clear the game screen, and then set our new screen color. If we are including more than one game screen, we also can set individual colors for each game screen, or have them all the same color. Either or, all game screen colors are set in the Render method. For multiple game screen colors, we can easily implement the 'switch' case function, to show the correct screen color for the game screen we are currently displaying.
Render method, is where we draw our game graphics to the screen. So this would include images, fonts, game characters, and the like. If we are using Stage, we can draw them to stage with the 'stage.draw()' code call, otherwise, we can draw them with batch.
For this tutorial, Game Fonts, we are only drawing our fonts to the screen, and for that we will use Spritebatch, as shown in this next image of our code. We are using the word 'batch', here because we named our Spritebatch(class member) variable as batch. Spritebatch batch;'. We draw each font to the screen in this method, and set their text, and give them each a x,y position on the game screen. X is for width, and Y is for height on the game screen. We must include batch.begin(), and batch.end(), when we draw our game fonts to the game screen.
And, at this code; for our default BitmapFont; we include:
font.draw(batch,"Game Font, default font",37,280);
We also set the text we want for the game screen, and set its' position with the x and y values.
Dispose - At dispose method, we get to dispose of all our game assets, to keep our game performance at its' best. If using Stage, we can dispose of all assets at once, with 'Stage.dispose();' code call, otherwise we can dispose of each variable directly. In this tutorial - Game Fonts, we are not using Stage of Scene2d, so we will dispose of each asset directly(separately), as shown here. To note, we do have to dispose of the default game font also, with font.dispose()
//dispose of the fonts
batch.dispose();
myFont62.dispose();
myFont52.dispose();
myFont42.dispose();
font.dispose();
Summary
With this tutorial, we coded three custom game fonts, and also seen how they compare to the default BitmapFont of Libgdx. We learned how we can convert ttf, and otf fonts, into the fnt font type that support BitmapFont, the type we implemented in this tutorial. Custom fonts are ready to use fonts, because we can download them with a preset size, color, and style. This can simplify our coding, since we don't have to scale the fonts, or add a color for them. And, custom fonts can easily be added with simple or more complex game code.Custom fonts can also blend with the theme of your mobile game. These next images show some examples of custom fonts that can be easily matched with a particular game genre.
Custom Fonts for This Tutorial
To get the custom fonts for this tutorial, you can Save the required png images and fnt files from the example code section. Each custom font has 2 files, the fnt file, and the png file which is the image containing all the letters and numbers(glyphs) for the font. Save each file for all three fonts, 6 files in total, and name them as shown. Then just copy and paste them into the 'assets' folder of this app project.
EXAMPLE CODE - Code For This Tutorial.
JUST copy and paste to update your code.
JUST copy and paste to update your code.