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 コマンドが利用できるようになります。
古いバージョンの 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 がインストールされている必要があります。