npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

msdf-bmfont-xml

v2.7.0

Published

Creates a BMFont compatible bitmap font of Signed-Distance Fields from a font file

Downloads

11,758

Readme

msdf-bmfont-xml

Build Status npm version npm

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

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. (See: BMFont format) Preview image

Run script to see MSDF font in browser using pixi.js

npm install & npm run render

Install as CLI

npm install msdf-bmfont-xml -g

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

Console-Demo

Usage

Usage: msdf-bmfont [options] <font-file>

Creates a BMFont compatible bitmap font of signed distance fields from a font file

Options:
  -V, --version                 output the version number
  -f, --output-type <format>    font file format: xml(default) | json | txt (default: "xml")
  -o, --filename <atlas_path>   filename of font textures (defaut: font-face)
                                font filename always set to font-face name
  -s, --font-size <fontSize>    font size for generated textures (default: 42)
  -i, --charset-file <charset>  user-specified charactors from text-file
  -m, --texture-size <w,h>      ouput texture atlas size (default: [2048,2048])
  -p, --texture-padding <n>     padding between glyphs (default: 1)
  -b, --border <n>              space between glyphs textures & edge (default: 0)
  -r, --distance-range <n>      distance range for SDF (default: 4)
  -t, --field-type <type>       msdf(default) | sdf | psdf (default: "msdf")
  -d, --round-decimal <digit>   rounded digits of the output font file. (default: 0)
  -v, --vector                  generate svg vector file for debuging
  -u, --reuse [file.cfg]        save/create config file for reusing settings (default: false)
      --smart-size              shrink atlas to the smallest possible square
      --pot                     atlas size shall be power of 2
      --square                  atlas size shall be square
      --rot                     allow 90-degree rotation while packing
      --rtl                     use RTL(Arabic/Persian) charactors fix
  -h, --help                    output usage information

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:

msdf-bmfont --reuse -o path/to/atlas.png -m 512,256 -s 42 -r 3 -p 1 -t msdf path/to/font.ttf

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

Atlas0

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:

msdf-bmfont -v -u path/to/atlas.0.cfg -t sdf -p 0 -r 8 path/to/anotherfont.ttf

This time we get a modified atlas.0.png with new bitmap font appended:

Atlas1

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

svg

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

final

Install as Module

npm install msdf-bmfont-xml

Module usage Examples

Writing the distance fields and font data to disk:

const generateBMFont = require('msdf-bmfont-xml');
const fs = require('fs');

generateBMFont('Some-Font.ttf', (error, textures, font) => {
  if (error) throw error;
  textures.forEach((texture, index) => {
    fs.writeFile(texture.filename, texture.texture, (err) => {
      if (err) throw err;
    });
  });
  fs.writeFile(font.filename, font.data, (err) => {
    if (err) throw err;
  });
});

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

const generateBMFont = require('msdf-bmfont');

const opt = {
  charset: 'ABC.ez_as-123!',
  fieldType: 'sdf'
};
generateBMFont('Some-Font.ttf', opt, (error, textures, font) => {
  ...
});

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:

  • 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)

  • 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 xml\json 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.