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 プロパティに指定できる値)を指定することができます。 strokestylefillstyle と同様に CSS の色を指定することが出来ます。

以下は fillstylered を指定した場合に生成される画像の例です。 赤いビットマップ画像

baseline は省略時は自動で計算されるので、基本的には利用する必要はありません。

quality オプションを指定する場合、 pngquant がインストールされている必要があります。