Home > Development > Auto-generate Custom Bitmap Fonts for XNA

Auto-generate Custom Bitmap Fonts for XNA

image

UPDATE: The tool mentioned here is made by the fine folks at NUBIK

I recently spent many an hour trying to create a glow-effect for fonts in XNA using the XNA Bitmap Font Maker tool and Photoshop only to discover that it is yet another thing beyond my feeble artistic and technical ability. I thought I understood alpha-channels…what was a XNA noob to do?

Enter the free, rather schmick[1] tool – SpriteFont 2 that generates bitmap font sheets with glow, drop shadow, outline effects and more.  It’s wizard-style interface allows you to quickly pick a font, size, style, effects all while displaying a rather nice preview of what is to come.  Once you are happy hit Export and voila – instant BMP, JPEG, PNG etc that can be immediately added to your XNA project as a texture.

When dragging into your project you must set the Content Processor to Spite Font Texture – XNA Framework.  XNA defaults to Texture – XNA Framework or something or other.

image

Apparently, .spritefont files get compiled to an image anyway so whether you decide to use them or pre-generated font bitmaps, the result is the same by the time you load the font in your XNA program via:

_spriteFont = Content.Load<SpriteFont>("Fonts/my spiffy font");

Just be sure that you rasterise fonts from the redistributable XNA font list else the men in black will come a-knocking on your door.

Here’s an example of how I use the fonts in my XNA space simulator thus far.  Here I am using fonts in the multi-function displays  – the Primary Flight Display (PFD) (showing auto-pilots) and the Navigational Display (ND) at bottom-left and bottom-centre respectively.  The PFD draws fonts in the ‘speedo’ ticker-tape and the ND shows ecliptic azimuth via transformed text on the large dial.


[1] schmick, adjective; meaning ‘very cool’.  seems to be an Australian slang word. yay! we invented something Winking smile

Advertisements
Categories: Development Tags: ,
  1. Henry Daniel
    2011/05/18 at 9:19 am

    Great post man, thank you so much, it helped me a lot!.

    Like

    • MickyD
      2011/05/18 at 6:15 pm

      anytime buddy

      Like

  2. Truyenle
    2011/06/06 at 10:52 pm

    Hi MickyD,

    Just a little question.

    I did add the .png generated from SpriteFont2 called abc.png to my project. Then Right click on this abc.png file -> Properties -> Content Processor -> Sprite Font Texture – XNA Framework.

    After that, under my LoadContent method I add

    SpriteFont font = content.Load(“abcTextureAssetName”);

    abcTextureAssetName is the Asset Name found under Properties -> Asset Name.

    But I couldn’t get the code compile, the error is as:
    Error 1 There was an error while deserializing intermediate XML. Invalid character in the given encoding. Line 1, position 1. C:\GoblinXNAv3.5\projects\Content\abc.png

    Any clue where did I do wrong? Thank you so much

    Like

  3. Truyenle
    2011/06/06 at 11:08 pm

    Never mind, somehow, the .png generated by the application get error.
    I just regenerate it and it work.

    Thanks, great post and very helpful.

    Like

    • MickyD
      2011/06/07 at 9:12 am

      sorry i didnt reply to you in time but great to hear you got it going in the end. thanks for your kind comments and happy XNA’ing

      Like

  4. 2011/11/26 at 4:04 am

    Your tool is outstanding, thank you very much. I would also include this snippet that will allow you to use multiple character ranges in a bitmap font:

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;

    using Microsoft.Xna.Framework.Content.Pipeline;
    using Microsoft.Xna.Framework.Content.Pipeline.Processors;

    namespace BitmapFont
    {
    ///
    /// This class will be instantiated by the XNA Framework Content Pipeline
    /// to apply custom processing to content data, converting an object of
    /// type TInput to TOutput. The input and output types may be the same if
    /// the processor wishes to alter data without changing its type.
    ///
    /// This should be part of a Content Pipeline Extension Library project.
    ///
    ///
    [ContentProcessor(DisplayName = “Sprite Font Texture – Custom Ranges”)]
    public sealed class CustomBitmapFontProcessor : FontTextureProcessor
    {
    private string charList;
    private Dictionary charsForIndex = new Dictionary();

    protected override char GetCharacterForIndex(int index)
    {
    if (index >= charsForIndex.Count)
    {
    throw new ArgumentOutOfRangeException(“index”);
    }

    return charsForIndex[index];
    }

    [Description(“The complete list of characters in the font, separated by semi-colon (i.e. 32-126;8000)]”)]
    public string CharList
    {
    get { return charList; }
    set
    {
    int index = 0;
    charList = value;
    string[] pieces = charList.Split(‘;’);
    foreach (string s in pieces)
    {
    string[] pieces2 = s.Split(‘-‘);

    if (pieces2.Length == 1)
    {
    charsForIndex.Add(index++, (char)int.Parse(pieces2[0]));
    }
    else if (pieces2.Length == 2)
    {
    for (int i = int.Parse(pieces2[0]); i <= int.Parse(pieces2[1]); i++)
    {
    charsForIndex.Add(index++, (char)i);
    }
    }
    }
    }
    }
    }
    }

    Like

    • MickyD
      2011/11/26 at 4:12 am

      hi jeff,
      thanks though actually i did not make this tool, contact the fine folks at spritefont@nubik.com where i’m sure they’ll love your idea.
      thanks buddy

      Like

  5. Patchrick
    2012/07/01 at 6:38 pm

    outstanding

    Like

  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: