Converts a .ttf font file into multichannel signed distance fields, then outputs packed spritesheets and a xml(.fnt} or json representation of an AngelCode BMfont.

• Bitmap Font Tool
• Bitmap Font Creator

Signed distance fields are a method of reproducing vector shapes from a texture representation, popularized in this paper by Valve.This tool uses Chlumsky/msdfgen to generate multichannel signed distance fields to preserve corners. The distance fields are created from vector fonts, then rendered into texture pages. A BMFont object is provided for character layout.

Install as CLI

Hello, I have a custom bitmap font that I want to use. I can't figure out how to generate a font asset from a bitmap font. It seems that the type Font only accepts.ttf and.otf fonts. Bitmap font generator This program will allow you to generate bitmap fonts from TrueType fonts. The application generates both image files and character descriptions that can be read by a game for easy rendering of fonts. The BitmapFont class parses bitmap font files and arranges the glyphs in the form of a text. The class parses the XML format as it is used in the AngelCode Bitmap Font Generator or the Glyph Designer.This is what the file format looks like. Here is how a bitmap font looks like: In addition to a texture like this, there is also an XML-file that describes which character can be found at which position in the image, and other information. To create a bitmap font, we recommend one of the following tools. It might help if you posted your code so we could try it ourselves and point out the errors. You should be able to generate a sample watch-app from the project templates, and it demonstrates how to place a bitmap in a layout.

Then you just need to call msdf-bmfont from console to generate font file.Type in msdf-bmfont --help for more detail usage.

Usage

CLI Examples

Generate a multi-channel signed distance field font atlas with ASCII charset, font size 42, spread 3, maximum texture size 512x256, padding 1, and save out config file:

We will get three file: atlas.0.pngatlas.0.cfg & font.fnt and this is the generated atlas in the minimum pot size (256x256):

Then we want to use the old setting except a different font and use monochrome signed distance field atlas, and output an extra .svg version of atlas:

Need for speed most wanted 2005. This time we get a modified atlas.0.png with new bitmap font appended:

Not satisfied with the style? Remember we got a svg atlas!

How about fire up some graphic editor and add some neat effect and lay on the output atlas?

Install as Module

Module usage Examples

Writing the distance fields and font data to disk: Call of duty waw.

Generating a single channel signed distance field with a custom character set:

API

generateBMFont(fontPath | fontBuffer, [opt], callback)

Renders a bitmap font from the font specified by fontPath or fontBuffer, with optional opt settings, triggering callback on complete.

Options:

Bitmap Font Tool

• outputType (String)
  • type of output font file. Defaults to xml
    • xml a BMFont standard .fnt file which is wildly supported.
    • json a JSON file compatible with Hiero
• filename (String)
  • filename of both font file and font atlas. If omited, font face name is used. Required if font is provided as a Buffer.

• charset (String

  Array)

  • the characters to include in the bitmap font. Defaults to all ASCII printable characters.
• fontSize (Number)
  • the font size at which to generate the distance field. Defaults to 42
• textureSize (Array[2])
  • the dimensions of an output texture sheet, normally power-of-2 for GPU usage. Both dimensions default to [512, 512]
• texturePadding (Number)
  • pixels between each glyph in the texture. Defaults to 2
• border (Number)
  • space between glyphs textures & edge. Defaults to 0
• fieldType (String)
  • what kind of distance field to generate. Defaults to msdf. Must be one of:
    • msdf Multi-channel signed distance field
    • sdf Monochrome signed distance field
    • psdf monochrome signed pseudo-distance field
• distanceRange (Number)
  • the width of the range around the shape between the minimum and maximum representable signed distance in pixels, defaults to 3
• roundDecimal (Number)
  • rounded digits of the output font metics. For xml output, roundDecimal: 0 recommended.
• vector (Boolean)
  • output a SVG Vector file for debugging. Defauts to false
• smart-size (Boolean)
  • shrink atlas to the smallest possible square. Default: false
• pot (Boolean)
  • output atlas size shall be power of 2. Default: false
• square (Boolean)
  • output atlas size shall be square. Default: false
• rot (Boolean)
  • allow 90-degree rotation while packing. Default: false
• rtl (Boolean)
  • use RTL(Arabic/Persian) charators fix. Default: false

The callback is called with the arguments (error, textures, font)

Bitmap Font Creator

• error on success will be null/undefined
• textures an array of js objects of texture spritesheet.
  • textures[index].filename Spritesheet filename
  • textures[index].texture Image Buffers, containing the PNG data of one texture sheet
• font an object containing the BMFont data, to be used to render the font
  • font.filename font filename
  • font.data stringified xmljson data to be written to disk

Since opt is optional, you can specify callback as the second argument.

License

MIT, see LICENSE.md for details.