ShoeBox

Bitmap Font

Creates a anglecode compatible *.fnt bitmap font. This format is supported in many game engines like Unity3D, UDK, Starling or Cocos2d. The way this tool is different from others is that it lets you fully customise the font for example in Photoshop.

Workflow

  1. In the settings choose or customise the character set you need for your font.
  2. Click and hold down the mouse for 2 seconds on the tool to copy the characters as a string to your clipboard.
  3. In Photoshop create a new document, create a text and paste the string from your clipboard. Style your text.
  4. Save the text as PNG image and drop it on this tool. A preview window should pop up showing the bitmap font in action.

Video

This video should give you an overview on how to use it.

Kerning

There is a option to generate optical kerning pairs. This works by shooting rays at the bitmap bitmaps and calculating their volumes left and right of each character.

Since this is just an automated process its never the same quality as a manual kerning but it might improve the readability of your font in some cases.

Big Fonts

For very big fonts or character collections with a big range of characters you can process bitmaps up to 8191 x 2048 pixels. For this reason the Bitmap font lets you also parse bitmaps that consist of multiple rows of characters. This is necessary if the width of you bitmap is greater than 8191 pixels. In that case simply have the characters wrap into a new line so that all characters fit within a 8191 wide bitmap.

Settings

The templates contains "Angelcode fnt" format in various flavours as well as a CSS bitmap font option.

Tip: If you want to quickly import custom character sequences that you want in your font, save a txt file with all the phrases you want to support and drag it instead of a PNG file on the tool. It will extract all the unique characters and setup the settings to match these characters. After that simply click on the tool to copy the sequence and start designing the font like usual.

 

• File Format Loop
Output format for the font structure file, this is the looping part (for each character). Dynamic Variables that are supported:
  • @id = The ASCI id of the letter or character
  • @x = x-position of the texture source rectangle
  • @y = y-position of the texture source rectangle
  • @w = width of the texture rectangle
  • @h = height of the texture rectangle
  • @sx = x-offset of the texture rectangle
  • @sy = y-offset of the texture rectangle
  • @advanceX = horizontal offset towards the next character
  • @advanceY = line height or vertical offset to the next line
  • @letter = letter or character as string
• File Format Loop Kerning
Output format for the kerning pairs. Dynamic Variables that are supported:
  • @kernPairIdA = the UTF/ ANSI character code of the first character
  • @kernPairIdB = the UTF/ ANSI character code of the second character
  • @kernPairAmount = the additional kerning value to adjust the kerning for this pair.
•FileFormatOuter
Output format for the font structure file, this is the outer part that wraps around the loop. Dynamic Variables that are supported:
  • @loop = The txtFormatLoop part in this outer shell.
  • @count = amount of the characters
  • @padding = texture padding
  • @texW = final texture width
  • @texH = final texture height
  • @fileName = filename without extention
  • @kerning = space in pixels between the characters. Use negative values to move characters together.
  • @kernPairCount = the count of the kerning pairs.
  • @kernLoop = the FileFormatLoopKerning part in this outer shell.
• FileGenerate2x
If set to true it will output 2 pairs of spritesheet and asci file instead of 1 pair. One of them will be half of the input design the other one at 100% scale will be called 2x following the apple guidelines for multi resolution setup's.
• FileName

The filename of the asci file that will be saved (with extention). The texture file which always is a PNG image will be based on this name.

The following variables are supported:

  • "@fileOriginalName" = The original dropped in file name without file extention.
• Message
Preview sample message that will be rendered in the preview window. Any non supported characters will be left out.
• TexPadding

Padding in pixels for the sprite sheet.

 

• TexMaxSize

The maximum size in either width or height for the texture. For example popular phones or tablets often have a limitation of 2048 ^ 2 for the textures.

• TexPowerOfTwo
If the sprite sheet texture should be packed within power of 2 units or not. Keep in mind that most frameworks pack the font spritesheet as part of a bigger texture sheet so keeping it to power of 2 units is not really needed.
• TxtChars

The characters to include in this Bitmap Font. Just type them all in one sequence without any seperator characters.

Example: ABCDEFGHIJKLMNOPQRSTUVWXYZ!?

• Kerning Build Pairs
Wether or not to build optical kerning pairs.
• Kerning Pairs

The character pairs that should be considered for optical kerning. The default template comes with a list of 500+ pairs of common latin kerning pairs.

Example: A' AC AG AO AQ AT AU AV AW ...

• Kerning Rays
Number of rays used to calculate the volume between characters. The more rays used to more accurate the result but the slower the parsing. A good default value is 6-8.
• Kerning Value
Amount in pixels between each character when rendering the text.
• TxtLineHeight
The line height in pixels that defines when the next line of text is rendered. This value is usually set around 120% of the font height.
• TxtMonospace
When set to true the bitmap font will be treated as a monospace font and all characters have a equal width where each character content is centered for each character. You might not see a difference in the packed sheet preview because the alpha bounds are cropped for each character.
• TxtSpaceWidth
The width of the space character between words in pixels.
• TxtTabSizeSpaces
The tab character is defined in x-amount of spaces. Set the amount here to define the width of a tab. A common value is 8 spaces.

Automatially finding values: This tool has a Auto fit button in the main editor window. If you press it it will find the ideal kerning distance, line height (130% Versailes height) and character spacing between words.

It will update automatically the settings everytime you press it.

 

Example UiToolkit for Unity3D

There is a template for UiToolkit for Unity3D. In order for the font to work in UiToolkit however it must be part of a texture sheet which can be generated using the "Pack Sprites" tool in ShoeBox.

Example Chinese Bitmap Font

This video demonstrates how to create chinese or other foreign bitmap fonts.

Example HTML/CSS/JS

With the CSS export option you can create custom Bitmap fonts for websites. Here is a sample (view sourcecode of this page)

Enter a text:

helloworld

png texture used

References