ビットマップフォントの利用 - exch-bms2/beatoraja GitHub Wiki

概要

beatoraja 0.6.5 から JSON / Lua スキンで使えるビットマップフォントの作成・設定方法を説明します。

ビットマップフォントのメリット・デメリット

ビットマップフォントは各文字があらかじめ画像にレンダリングされたフォントです。アウトラインフォントとは以下の点で異なり、ゲームでよく使われています。

グラデーションやアウトラインなどのエフェクトをあらかじめ加えておくことができ、高い表現力を持つ
使う文字だけ画像に収録すればよいので、用途によっては容量を節約できることがある
画像化されているため、拡大すると汚くなる（距離フィールド形式の場合はこの短所が緩和されている）
日本語全体など多くの文字を収録し、なおかつ汚くならないようにある程度の大きさを確保しようとすると、アウトラインフォントよりもかなり容量・負荷が大きくなってしまう

スキンで使う主な動機はグラデーションやアウトラインなどのエフェクトということになります。これらのエフェクトが不要であれば、アウトラインフォントを使った方が良いでしょう。（※1）

（※1）beatoraja 0.6.4 以前はテキストが指定領域からはみ出るのを防げないなどの問題がありましたが、0.6.5 にてテキストの折り返しや指定領域への縮小などの設定機能を追加しています。この機能はアウトラインフォント・ビットマップフォント共通で使えます。

スキンの種類と対応するフォントの種類

スキンの種類	アウトラインフォント	ビットマップフォント
LR2 (.lr2skin)	△ （スキンからフォントの指定は不可）	`#LR2FONT` / .lr2font
JSON / Lua	○ （.ttf など使用可能）	本記事で説明する Hiero で作成した .fnt を使用可能

また、Hiero で作成できるビットマップフォントは beatoraja で使うことを考えると「通常」「距離フィールド」の2つに分類できます。

通常形式はグラデーションやその他複雑なエフェクトを実現できるが、使用場所ごとにパラメータを変えることができないため使い回しにくく、拡大すると汚くなる。
距離フィールド形式は使い回しやすさに優れていて、使用場所ごとに色や大きさを変えても比較的きれいに表示できる。アウトラインや影をサポートしている（これらのパラメータもパーツごとに変更可能）が、グラデーションはできない。

準備

1. Hiero をダウンロードする

上記リンクから Hiero の Download を選択し、 runnable-hiero.jar をダウンロードすればOKです。

2. 元となるフォントを用意する

この記事では既存のフォント（.ttf など、普通にPCにインストールできるもの）を元にビットマップフォントを生成する方法のみ説明するので、元となるフォントファイルを用意してください。

スキンを公開する場合は「フォントを改変してスキンの一部として配布する」という行為を行うことになるので、フォントの利用規約に違反しないよう注意してください。市販フォントはほぼ使えません。フリーフォントであっても、配布には一定の条件（※2）を満たす必要があったり、使えなかったりすることがあります。有名どころについての情報はゲームに使えるフォント - ゲーム製作雑談スレ Wiki を参考にしてください。（情報が古い可能性もあるので、最終的には公式の情報で判断しましょう）

（※2）例えば、ライセンス文書の同梱や、改変前のフォントの同梱など

3. スキンでフォントを使用する場面を整理する

どのような文字を用意する必要があるか（楽曲タイトルなどBMSに依存したテキストを表示するには多くの文字をカバーする必要があります）、文字の大きさやエフェクトの有無はどうかなどを整理しておきます。

複数のビットマップフォントを同時に読み込むと非常に高負荷となるため、前述の「通常」「距離フィールド」の違いに注意し、可能な限りフォントを使い回すようにしてください。

Hiero でビットマップフォントを作成する

runnable-hiero.jar を実行し、元となるフォントファイル、使用する文字、エフェクトなどのパラメータを指定して画像ファイルと .fnt ファイルの書き出しという流れになります。

通常（距離フィールドではない）形式のフォントを作る場合

画面左中央の Rendering を Java に変更すると画面右上の Effects が選択できるようになるので、好きなエフェクトを追加します。
画面上部の Sample Text には、使用する文字を全部入力します。デフォルトではASCII文字しか入っていないので、日本語に対応する場合は「(Shift) JIS 文字一覧」などでググってコピペしてくるか、LR2の FontUtil を参考にするなどして埋めます。（恐らく滅茶苦茶重くなるので、まずは一部の文字だけ入力して他のパラメータを先に調節したほうがいいです。あとは、JIS に入っていない文字も曲名で使われることがあるので、気になる場合は各自調査してみてください。）
画面下部には、Sample text 選択時はテキストがどのように表示されるかのプレビューが表示されます。Glyph cache を選択すると画像の中に文字がどのように詰め込まれているかを確認することができます。このとき、Page width と Page height はページ数（Pages: の値）がなるべく少なくなるように調節します。
フォントサイズは使用目的と Glyph cache の結果を考慮して決めます。

距離フィールドフォントを作る場合

パラメータの指定の仕方は Distance field fonts · libgdx/libgdx Wiki を参考にしてください。リンク先に書いてあること以外の基本的な使い方は、通常形式と同じです。うまくいかない場合は以下のことを確認してください（リンク先とほぼ同じ内容です）。

初期設定の Color というエフェクトを削除する（削除し忘れると文字の縁が汚くなります）
Padding の値（上下左右全部）は Distance field エフェクトの Spread の値以上にする（間違っていると文字の縁が欠けることがあります）
Padding の下にある X と Y は、Padding の値を -2 倍した値を設定する（間違っていると文字の位置がずれます）
Distance field の Scale を大きくするほどクオリティが上がるが、作成に非常に時間がかかるようになる（まずは小さな値で他のパラメータ調整推奨）

また、距離フィールドフォントは拡大してもあまり汚くならないという性質から、作成時のフォントサイズパラメータは多少いい加減でも構いません。フォントの複雑さにもよりますが、大抵は 30～50 もあれば十分です。

ファイル書き出し・配置

メニューバーの File - Save BMFont files を選択すると .fnt ファイルとページ数分の画像ファイルが出力されます。これらをスキン中の同じディレクトリに格納することで、スキンから使えるようになります。

スキンの設定

フォント定義部分

これまで .ttf を指定していたところを .fnt に変更するだけで使えるようになります。ただし、距離フィールド形式の場合は "type": 1 という項目を追加してください。

下の例では、id=0 から順番に、従来のアウトラインフォント、通常形式のビットマップフォント（"type": 0 は省略可能）、距離フィールド形式のビットマップフォントを定義しています。

    "font": [
        {"id":0, "path":"VL-Gothic-Regular.ttf"},
        {"id":1, "path":"example.fnt", "type": 0},
        {"id":2, "path":"example_df.fnt", "type": 1}
    ]

テキスト定義部分

JsonSkin.Text クラス（ソース）を参照してください。beatoraja 0.6.5 から以下のフィールドが使えるようになっています。☆は距離フィールドフォント専用です。（※3）

wrapping: Destination の領域の端で折り返すかどうか。 true / false
overflow: （wrapping=false のとき）領域からはみ出したときどう処理するか。（0:そのまま、1:縮小、2:切り詰め）
☆ outlineColor: アウトラインの色。 "000000ff" のように指定。
☆ outlineWidth: アウトラインの幅（ピクセル単位ではなく、距離フィールドフォント作成時のパラメータに依存した単位になっています。0はアウトライン無しで1は最大の太さです。）
☆ shadowColor: 影の色。
shadowOffsetX, shadowOffsetY: 影の位置。
☆ shadowSmoothness: 影の滑らかさ。

（※3）距離フィールドフォント以外で shadowOffsetX, shadowOffsetY を指定すると、本体より少し暗い色で重ねて描画するという簡易的な方法で影が描画されます。

なお、文字本体の色はテキスト定義ではなく Destination 定義で指定します。文字色の指定は全形式で有効です。