HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavaMajor

Convert Bitmap Font to Texture Atlas

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
convertatlasfontbitmaptexture

Problem

I wanted to render the textures that comprise a bitmap font glyph onto the screen directly as an Image in libGDX. When you make a bitmap font using a program (such as Hiero), it generates a text readable .fnt file along with a .png file that is the sprite sheet for the font. The only thing missing is a matching .atlas file to tell the location of the textures in that .png.

This program takes a .fnt file as input and outputs a .atlas file that can be used with libGDX (and any engines that use the same type of atlas file). It parses the font file to find the names of the textures and their location on the sprite sheet.

One reason I am seeking feedback is that this is the first program/code that I have put on Github with the intention of other people using it. It would be interesting to hear whether there are enough comments and enough documentation for others to understand and use software.

Launcher.java

public class Launcher {

    /**
     * The file name for the atlas generator must be passed in
     * without a file extension.
     */
    public static void main(String[] args) throws IOException {
        String fileName = "test_dos437";
        new FntToAtlasGenerator(fileName);
    }
}


FntToAtlasGenerator.java

```
/**
* The idea is to pass in the name of a .fnt file generated by Hiero
* This program will generate a .atlas file that is compatible with libGDX
* Next put the .atlas file and the .png that comes along with the .fnt file
* into the android/assets folder of your libGDX project.
*
* @author baz
*
*/
public class FntToAtlasGenerator {

List glyphs = new ArrayList();

public FntToAtlasGenerator(String fileName) throws IOException {

//String fileName = "test_dos437";
String inputDir = "input/";
String outputDir = "output/";
String extension = ".fnt";
String atlasExtension = ".atlas";

FileReader fontReader = new FileReader(inputDir + fileName + extension);

Solution

Turning my comment into an answer by request. You should be able to do what you want by simply using the functionality already built into LibGDX.

Caveat: I have not tried this, I just know that the class exists and it should be possible to extract the data you want from it, so: some assembly may be required on your part.

LibGDX has functionality for loading and dealing with bitmapped fonts. See the documentation here.

You can use the BitmapFont class to load the font data. It supports AngelCode BMFont formats. Hiero which you are using can output to BMFont.

Create a new instance of the BitmapFont:

BitmapFont bmf = new BitmapFont(Gdx.files.internal("data/myfile.bmf"));


Then get the data backing the font:

BitmapFont.BitmapFontData bmfdata = bmf.getData();


Get the Glyph for your wanted character, this contains the u/v coordinates for the glyph and which texture page it is on and some other goodies. Then get the correct texture page from the BitmapFont and use the u/v pairs to extract the texture region for your wanted glyph:

BitmapFont.Glyph glyph = bmfdata.getGlyph(character);

if(glyph == null){
    // handle error: No glyph for character
}
else{
    TextureRegion page = bmf.getRegion(glyph.page);
    TextureRegion glyphTexture = new TextureRegion(page.getTexture(), glyph.u, glyph.v, glyph.u2, glyph.v2);
    // Use glyphTexture to render, or store it somewhere. 
}


Again, I have not tested this. You may have to fiddle around or use other properties of the glyph to get the wanted result. But the data you need is all in there, you just have to pry it out. The LibGDX documentation (and source code) is your friend.

Code Snippets

BitmapFont bmf = new BitmapFont(Gdx.files.internal("data/myfile.bmf"));
BitmapFont.BitmapFontData bmfdata = bmf.getData();
BitmapFont.Glyph glyph = bmfdata.getGlyph(character);

if(glyph == null){
    // handle error: No glyph for character
}
else{
    TextureRegion page = bmf.getRegion(glyph.page);
    TextureRegion glyphTexture = new TextureRegion(page.getTexture(), glyph.u, glyph.v, glyph.u2, glyph.v2);
    // Use glyphTexture to render, or store it somewhere. 
}

Context

StackExchange Code Review Q#97144, answer score: 20

Revisions (0)

No revisions yet.