bmpfont-generator の仕様
bmpfont-generator は、TrueType フォント (.ttf) ファイルから指定された文字の画像を生成するツールです。 また Akashic Engine のビットマップフォントとして使う場合に必要になる、グリフ情報のデータを JSON 形式で同時に生成できます。
ビットマップフォントとその利用法については、チュートリアルの ビットマップフォントを使う を参照してください。
インストール方法
bmpfont-generator は Node.js 環境で動作します。各プラットフォームで、適当な方法で Node.js をインストールしてください。 この利用ガイドでは、 LTS 版の Node.js 環境を前提に説明を進めます。 執筆時点での LTS 版のバージョンは 10.16.0 です。
インストール
bmpfont-generator は以下のコマンドでインストールすることができます。
npm install -g @akashic/bmpfont-generatorインストール後、コマンドラインで bmpfont-generator コマンドが利用できるようになります。
TIP
古いバージョンの bmpfont-generator では、事前に Cairo をインストールしておく必要がありました。 これは bmpfont-generator が node-canvas を利用しており、その動作に必要なためです。
Cairo の事前インストールは、現在 Windows や Mac などの環境では不要になっています。 それら以外の環境では引き続きインストールが必要な可能性があります。 詳細は node-canvas の README (英語) を参照してください。
使い方
bmpfont-generator の典型的な実行方法は次のようなものです。
bmpfont-generator --chars '0123456789' --height 14 --fill '#ff0000' sourceFont.ttf bitmap.pngこのコマンドを実行すると、
- フォント sourceFont.ttf の、
- 数字 (0123456789) のグリフを、
- 高さ 14px で
- 赤色で描いて並べたビットマップ画像
が bitmap.png として出力されます。 また同じディレクトリに、グリフ情報として bitmap_glyphs.json ファイルが出力されます。
bmpfont-generator は以下のオプションを持ちます。
bmpfont-generator [<options>]<options> に指定可能なオプションは次のとおりです。
| オプション | 短縮名 | 効果 | 必須 | デフォルト値 |
|---|---|---|---|---|
--height <size> | -H | 文字の縦サイズ(px) | 13 | |
--fixed-width <size> | -w | 文字の横サイズ(px) 。指定した場合、文字の幅に関わらず size を幅の値とする | ||
--chars <string> | -c | 書きだす文字の羅列 | 0-9,a-Z,各種記号 | |
--chars-file <filepath> | -f | 書き出す文字が羅列されたテキストファイルのパス | ||
--missing-glyph <char> | -m | -c の指定に含まれない文字の代わりに用いる代替文字 | フォントが持つ代替文字 | |
--missing-glyph-image <filepath> | -M | 代替文字として用いる画像ファイルのパス | ||
--fill <fillstyle> | -F | フィルスタイル | #000000 | |
--stroke <strokestyle> | -S | ストロークスタイル | ||
--stroke-width <width> | ストロークの幅(px) | 1 | ||
--quality <quality> | -Q | 1-100 の画質。指定する場合、 pngquant が必要 | 圧縮しない | |
--baseline <baseline> | ベースライン | 自動で計算された値 | ||
--no-anti-alias | アンチエイリアス無効化 | |||
--json <filepath> | json ファイルを書き出すパス | <outfileName>_glyphs.json | ||
--no-json | json ファイルを出力しない | |||
--margin | 文字間の余白(px) | 1 |
fillstyle は CSS の色 (color プロパティに指定できる値)を指定することができます。 strokestyle は fillstyle と同様に CSS の色を指定することが出来ます。
以下は fillstyle に red を指定した場合に生成される画像の例です。 
baseline は省略時は自動で計算されるので、基本的には利用する必要はありません。
quality オプションを指定する場合、 pngquant がインストールされている必要があります。