Bitmap fonts in XNA

Bitmap fonts in XNA

  • Comments 13

The XNA font system is most commonly used to extract data from TrueType fonts described in XML files, but it is also capable of grabbing character images directly from hand drawn bitmaps.

TrueType fonts are convenient, but you may sometimes find yourself wanting a more distinctive look for your text. You can create custom typefaces by arranging a set of character images into a single bitmap, separating the areas between each letter with a pure magenta marker color:

This bitmap must include an alpha channel to specify which areas should be solid or transparent, and the alpha in the magenta border region must be set to fully opaque.

When you add this file to your Game Studio Express project, it will default to the "Texture" content importer and "Texture (Sprite, 32bpp)" content processor. To indicate that this is a special bitmap which should be converted into a font, you need to change the processor to "Font Texture":

Fonts that were created from bitmaps can be loaded and displayed by the SpriteFont class in exactly the same way as ones converted from XML description files. Using the embossed bitmap font shown above, I can render funky embossed writing:

At this point you may be worrying that drawing an entire font into a bitmap by hand is not your idea of fun. And you'd be right. I wouldn't enjoy it much either.

Fortunately, the kindly little gremlins who work at XNA CGP GSE Samples & Utilities, Inc, saw this problem coming and wrote a program to take care of it. This presents a user interface for selecting what TrueType font you want to use as a starting point:

When you click the Export button it does basically the same thing as the regular XML font description processor, but outputs the character images into a bitmap file separated by magenta marker regions.

I created my embossed font by running the ttf2bmp utility, taking the resulting bitmap into Photoshop, selecting everything except the magenta areas, running an emboss filter over it, and then feeding this modified image into the content pipeline "Font Texture" processor.

  • Shawn,

    Thanks so much for this. It is exactly what I was looking for. I knew there had to be some way to use this utility w/ SpriteFont, and now you've given us some great information.

    Thanks again,

    BoomerET

  • Shawn Hargreaves Blog announces the release of the Game State Management sample . His blog entry on Transitions

  • Is it thus possible to apply textures or color maps (diffuse,normal) to bitmap fonts from code?

    It'd be cool I think.

  • Hello, thanks for the sowftware,

    How do you generate a file with coordinates for the bitmap?...and then, do you have a class to read it?

    Thanks!

  • > How do you generate a file with coordinates for the bitmap?...and then, do you have a class to read it?

    You don't need a metadata file describing the bitmap. The importer detects chunks of the bitmap which are not mangenta and understands that they represent some glyph, you just have to specify which glyph (character) is the first one (top left) and the processor (importer?) will sequencially interpret them from top-left to bottom-right.

    In runtime, you simply load it with a ContentManager as a SpriteFont.

    Try to make your bitmap like the one above and you'll be fine.

  • How do you account for special spacing of certain fonts? My font looks beautiful and works great with my graphics in Photoshop, but then it is spaced wrong in my game. I guess you would need a custom processor for this case?

  • I think I just solved my own problem..

    write out the words in photoshop that look weird in my game and save them as uncommon letters or characters... so the letter "q" comes up as "play"

  • What if you wanted to make an non-roman font, e.g., one for east Asian character-sets (or for that matter, a made-up language)? Is there a simpler way than splitting them up between multiple texturefont files and creating some sort of manager class? Also, am I correct to assume that kerning is disabled for texture spritefonts?

  • Hi,

    The "Font textures" content processor doesn't seem to be available to my project. Do I need to download it somewhere?

    Thnks

  • xus:

    FontTextureProcessor is a standard part of XNA Game Studio: msdn.microsoft.com/.../bb447762.aspx

  • I got most of it, however, I still don't understand how to actually use the font. I've tried putting the name of the bitmap font image in the <fontname> namespace of the spritefont class, but it doesn't recognize the font. How else must I modify my code to accommodate my new font?

  • On MSDN it says that the FontTextureProcessor is only available when developing for Windows. Does that mean that font textures can't be used on Xbox 360?

  • @Jon : Font textures work just fine on the XBox 360.

Page 1 of 1 (13 items)
Leave a Comment
  • Please add 8 and 7 and type the answer here:
  • Post