MSDFフォント作成方法

 最近ではWartalesで使用されている新しいビットマップフォントの表示形式MSDF(Multi-channel Signed Distance Field)画像フォント。まだ使われているゲームは少ないとは思いますが、今後使われる可能性もあるかと思いますので作り方を紹介したいと思います(現状、Shiro games以外では見ていません)。
 一般的なフォント作成ツール「BMFont」などのようにGUI環境はありませんので少しハードルが高いとは思いますが、今後他のゲームでも使用される可能性がありますので有志日本語化を目指す方は勉強だと思って読み進めてください。

用意するもの

  • fontgenhttps://github.com/Yanrishatum/fontgen
    ダウンロードファイル:fontgen-v1.5.0.zip
  • hashlinkhttps://github.com/HaxeFoundation/hashlink
    HashLink Nightly Buildを使用しますのでreleaseの下にある「+ 14 releases」のリンクから。
    ダウンロードファイル:hashlink-2206f8c-win32.zip(表記はhashlink-latest-win32.zipになっているので注意)
  • フォント(TTF、OTFなど)
  • テキストエディタ(好きなもの)
前準備

  1. 好きな場所(可能ならCドライブを避け、D以降のドライブ直下)へfontgen-v1.5.0.zipとhashlink-2206f8c-win32.zipを解凍するためのフォルダを作成(ここでは仮にMSDFというフォルダを作成)。上SSの赤で囲った内容。
  2. 作成したフォルダにfontgen-v1.5.0.zip内の4ファイルをコピー、hashlink-2206f8c-win32.zip内にある「hashlink-2206f8c-win32フォルダ」内の1フォルダと27ファイルをコピーします。上SSの赤で囲った内容。
  3. 作成したフォルダ内にTTFというフォルダを作成。そこへ用意したフォントをコピーします(ここではNotoSerifJP-Regular.otfを利用します)。
定義ファイル

 MSDF画像フォントを作成するにはJSON形式の定義ファイルを作成する必要があります(詳細は日本語マニュアルを参照)。ここでは最低限の設定をしたものを紹介します。

例:sample.json
{
    "input": "ttf/NotoSerifJP-Regular.otf",
    "output": "NotoSerifJP24.fnt",
    "mode": "msdf",
    "charset": ["_moji_list.txt"],
    "fontSize": 24,
    "padding": { "top": 1, "bottom": 1, "left": 1, "right": 1 },
    "spacing": { "x": 2, "y": 2 },
    "dfSize": 5,
    "packer": {
        "width": 4096,
        "height": 4096,
        "pot": false,
        "exact": false,
        "sort": "-height",
        "algotithm": "max-rect",
        "heuristic": "BestLongSideFit",
        "useWasteMap": true}
}

 上記をテキストエディタで作成し、fontgen.exeと同じフォルダに配置します。

  • outputは出力するフォントのFNT名。上記の場合、画像はNotoSerifJP24.PNGとなります。
  • charsetは画像にする文字の一覧を入れたテキストファイルです。この設定がない場合はフォントに含まれるすべての文字を出力してくれますが、NotoSansCJKの場合、日本語以外の中国語、韓国語まで含んでしまうため画像ファイルが肥大化してしまうので注意(作成時間も大幅に増します)。

 上記SSがcharsetで利用する内容のサンプルです。MSDFフォントにしたい文字列をテキストエディタに入力しテキストファイルとして保存しておきます(サンプルJSONの場合だと「_moji_list.txt」という名前でMSDFフォルダに保存してあるという意味です)。

実行方法

 作成したフォルダのウィンドウ内でターミナル(コマンドプロンプト)を開きます(MSDFフォルダのウィンドウのアドレスバーに「cmd」と入力しENTERを押せば、そのフォルダ内でターミナル(コマンドプロンプト)が開きます。もしくはMSDFフォルダのウィンドウ内でSHIFT+右クリックをしコンテキストメニューから起動)。コマンドプロンプトの画面が開いたら、プロンプトに続き、

fontgen.exe sample.json -info

と入力します。これでフォントの作成が始まります。何度も作成する場合、バッチファイルを作成しておくといいでしょう。

fontgen.exe %~1 -info
cmd

 上記のファイルをテキストエディタで入力し、例えばMSDFgen_DnD.batという名前で保存し、fontgen.exeと同じフォルダに置きます。このバッチファイルに定義ファイルであるJSONファイルをドラッグ&ドロップすればコマンドラインから入力必要もありません。

生成ファイル

 上記のサンプルで作成されるのはNotoSerifJP24.FNTNotoSerifJP24.PNGの2つのファイルです。FNTファイルに関しては「bmfont64」というビットマップフォント作成ツールと同じ形式(テキスト形式)です。

 ただ、WartalesではこのFNTファイルがバイナリ形式となっています。噂ではテキスト形式のままでも利用可能だということですが、私はバイナリに変換するプログラムを作っています(ここではMSDFフォントの作り方なので説明は省きます)。