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

v1.1.0

Published

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

Downloads

24

Readme

msdf-bmfont

unstable

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

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

$ npm install msdf-bmfont

Unless previously installed you'll need Cairo, since node-canvas depends on it. For system-specific installation view the node-canvas wiki.

You can quickly install the dependencies by using the command for your OS:

OS | Command ----- | ----- OS X | brew install pkg-config cairo libpng jpeg giflib Ubuntu | sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++ Fedora | sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel Solaris | pkgin install cairo pkg-config xproto renderproto kbproto xextproto Windows | Instructions on the node-canvas wiki

El Capitan users: If you have recently updated to El Capitan and are experiencing trouble when compiling, run the following command: xcode-select --install. Read more about the problem on Stack Overflow.

Examples

Writing the distance fields and font data to disk:

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

generateBMFont('Some-Font.ttf', (error, textures, font) => {
  if (error) throw error;
  textures.forEach((sheet, index) => {
    font.pages.push(`sheet${index}.png`);
    fs.writeFile(`sheet${index}.png`, sheet, (err) => {
      if (err) throw err;
    });
  });
  fs.writeFile('font.json', JSON.stringify(font), (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) => {
	...
});

Usage

generateBMFont(fontPath, [opt], callback)

Renders a bitmap font from the font at fontPath with optional opt settings, triggering callback on complete.

Options:

  • 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
  • textureWidth, textureHeight (Number)
    • the dimensions of an output texture sheet, normally power-of-2 for GPU usage. Both dimensions default to 512
  • texturePadding (Number)
    • pixels between each glyph in the texture. Defaults to 2
  • transparent (Boolean)
    • generate texture atlases with a transparent background, instead of white
  • 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

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

  • error on success will be null/undefined
  • textures an array of Buffers, each containing the PNG data of one texture sheet
  • font an object containing the BMFont data, to be used to render the font

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

License

MIT, see LICENSE.md for details.