3

I'm working on a phone word game. Yesterday I decided to switch to OpenGL using libgdx to try and improve graphics performance and battery usage + to target more platforms.

The way letter tile drawing was working on a 2D canvas was each letter tile would create a bitmap for itself. I would:

  1. Create a new mutable bitmap from the background bitmap.
  2. Draw on the letter on the new bitmap.
  3. Apply other tile specific effects.
  4. Draw the new bitmap for each frame

What's the best way for me to achieve what I want using libgdx?

  1. Should I adopt a similar approach? If so, how? I tried using pixmaps but couldn't work out how to draw the font.
  2. Should I create a spritesheet with all the required tiles from A-Z and just use that? A bit tedious when I tweak the design of the tile background.
  3. Should I do something totally different?

Answer

Obviously the final code shouldn't load from the files every time, as this is a massive performance hit, but here's working sample code for anyone else who is trying to achieve the same result.

    // load the background into a pixmap
    Pixmap tile = new Pixmap(Gdx.files.getFileHandle(
            "someFile.png", FileType.Internal));

    // load the font
    FileHandle handle = Gdx.files.getFileHandle("someFont.fnt",
            FileType.Internal);
    BitmapFont font = new BitmapFont(handle);

    // get the glypth info
    BitmapFontData data = font.getData();
    Pixmap fontPixmap = new Pixmap(Gdx.files.internal(data.imagePaths[0]));
    Glyph glyph = data.getGlyph(getLetterToDraw().charAt(0));

    // draw the character onto our base pixmap
    tile.drawPixmap(fontPixmap, (TILE_WIDTH - glyph.width) / 2, (TILE_HEIGHT - glyph.height) / 2,
            glyph.srcX, glyph.srcY, glyph.width, glyph.height);

    // save this as a new texture
    texture = new Texture(tile);
Will Calderwood
  • 4,393
  • 3
  • 39
  • 64

1 Answers1

3

Quote: You can create a BitmapFontData instance and use BitmapFontData.getImagePath() to load a Pixmap containing the glyphs. You can then use BitmapFontData.getGlyph to get the location of a specific glyph in the Pixmap, which you can use with Pixmap.drawPixmap() to do what you want to do. Source: libgdx Issue 691: Draw BitmapFont to Pixmap/Texture

You get the path to the BitmapFontData and create a new Pixmap with the Filehandle to the path with this:

Pixmap(FileHandle file)

Creates a new Pixmap instance from the given file.

Source: PixmapAPI

Use Gdx.files.internal(pathfromBitmapFontData)as filehandle and you got the pixmap with all Glyps inside.

Pixmap p = new Pixmap(Gdx.files.internal(myBitmapFontData.getImagePath()))

try out if its an internal! Meight be not an internal file i dont know it

Pixmap p = new Pixmap(myFont.getData().getFontFile());

this should also work

Community
  • 1
  • 1
bemeyer
  • 6,154
  • 4
  • 36
  • 86
  • My issue is how I draw the BitmapFont onto a pixmap. Any ideas? i.e. How can I get a pixmap from a Bitmap font? – Will Calderwood Feb 20 '14 at 13:26
  • I found that too, if you can explain how I "use BitmapFontData.getImagePath to load a Pixmap containing the glyphs." then that would be progress. – Will Calderwood Feb 20 '14 at 13:33
  • I'm just using the libgdx default font for testing at the moment. I'll try creating a bitmap font and see if I can get it to work with that. – Will Calderwood Feb 20 '14 at 13:51
  • You can do it with the default by `getData()` which returns the `BitmapFontData`. You can even get the Filehandle to the File for the pixmap! `font.getData().getFontFile();` – bemeyer Feb 20 '14 at 13:52
  • Thanks for your help. I couldn't get it working with the default bitmap font. Got it working eventually with one I created however. I'll update my question with the final code. – Will Calderwood Feb 20 '14 at 14:23