Skip to content

Using Bitmap Fonts for UIToolkit (Unity)

July 18, 2013

When you need to present text with UITookit for Unity − and for sure you’ll need that sooner or later − you have to use a bitmap font, so a fixed rendered image of all characters of a vector font (like a True Type font) you would normally use. First of all you need a tool to create such an image of a vector font. For Windows, there is a free tool from Angelcode, and for the Mac you can use the free Hiero. Both have it’s ups and downs, but hey − they are completely free. I did not get along too well with either of them, but maybe you have more patience to try them out.

If you are willing to pay a bit, then for the Mac there is the excellent but a bit more expensive Glyph Designer, and what I found lately and use now is the excellent and very easy to use BMGlyph tool (around $10), which I explain from here on.

Once you started BMGlyph, just select an already installed font or load a vector font explicitly by clicking the folder bottom right of font selector list. Now perform the following settings:

  1. Choose the font size to render. That should be the largest font size you plan to use, multiplied by four to create the largest resolution for iPad retina screens. So if your largest font is 24px, select 96 here. If you need a lot of much smaller font sizes also, you should consider to render an additional smaller font, because a small font will look better if rendered at that size, rather than just being scaled down.
    In the lower left character box, you can enter all characters you’ll need to support the different languages you need. You can preselect Basic Latin and Latin Supplement special characters (like German Umlaute), but you can also add them manually or edit the preselection.
    bmGlyph1
  2. bmGlyph3bmGlyph2Set the fill color to white, because otherwise you can’t change the color programmatically later on
  3. Try to not use fancy stuff like shadows, font outlines (stroke) or gradients, because they won’t scale well for lower resolutions or text sizes. So switch or leave off all the other settings if you don’t ned them badly. If you use them, check critically how your fonts look on all target platforms and in all final text sizes.
  4. Let the texture size be optimized through the Auto Size setting, because it will produce the smallest possible graphics, so we don’t waste too much space later on in our Texture Packer sprite sheet.
  5. Use Publish to start exporting the files we need. This is the hires texture rendering, plus three metadata files for the font information for each resolution. The first export setting called Default is already there. Set the target directory and name as you wish, and the suffix to 4x. Choose Unity as the format. Then select the Default entry and click the 50% and the 25% buttons on the lower left. For the 50% export, uncheck the texture export (only coordinates required) and set the suffix to 2x. For 25%, uncheck the texture also, and clear the extension.
    bmGlyph4
    bmGlyph5
    bmGlyph6
  6. Click Publish to export the hires image and three font files. The three font files need to go into a folder hierarchie below a Resource folder. For the image, remove the 4x extension again (I hope this won’t be necessary for future version of BMGlyph) and move it to your hires sprites for Texture Packer.
  7. Create a new set of spritesheets with Texture Packer, now containing also your bitmap font (I don’t explain using Texture Packer here, but it is explained on the UIToolkit page). It is important to have all your menu sprites and the font in one final texture to assure just one draw call for the GUI stuff, one of the major performance advantages of UIToolkit. Texture Packer will also create your 2x and lowres spritesheets also.
  8. To make your fonts (and other UIToolkit GUI sprites) look laser sharp and crystal clear, make sure to set all Unity spritesheet import settings to Texture Type: GUI and to Format: True Color (compressed will end up in very ugly, blurry artefacts).

Might look a bit confusing and like a lot to do, but the whole workflow is really easy, and once you did it for the first time, it is really a no-brainer.

Now all you need to do is load the font once with the UIText class, and with that you can create as many different UITextInstances as you like.

  // Some gameobject startup code
  void Start () {
    UIText fnt = new UIText("MarkerFelt", "MarkerFelt.png");
    UITextInstance text = fnt.addTextInstance("The quick brown fox", 20, 20);
    text.setColorForAllLetters(Color.yellow);
    UITextInstance text2 = fnt.addTextInstance("jumps over the lazy dog", 20, 60, 0.75f);
    text2.setColorForAllLetters(Color.red);
  }

Each text instance can have a different size by simply setting the textScale property (and better don’t scale it up − it’ll look ugly then if you use a valu larger than 1.0f). You can also change the color, and even each single letter inside of it can be set to a different color by providing a color array information. The right resolution will automagically be loaded from the spritesheets via the resolution extension mechanism (4x, 2x, -).

bitmapFont1

With these simple steps, you can now find your right font and use it in your Unity games. However, here is one final word of caution on free fonts: do read the licensing agreement of those fonts. Free fonts are rarely really free to use in games or other software. Usually they are only free to be used for producing printed or electronically published texts, sometimes also free to be used on websites. So make sure the license agreement explicitly lists usage in commercial software (like for the nice Junction font). And if specifically asked for, don’t forget the proper credits (like for the Stroke font). Missing to properly acknowledge the license type can get very expensive for you!

Advertisements

From → Development

One Comment

Trackbacks & Pingbacks

  1. UIToolkit for Unity | The Rombos-Blog

Leave a Reply

Fill in your details below or click an icon to log in:

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: