強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Glyph Designer で NGUI 向けのビットマップフォントを作る方法

NGUI

NGUI で文字を描画する場合には Unity が標準で使えるフォントファイルによる描画は使えません。 NGUI ではビットマップフォントを作成出来るツールなどを使ってビットマップフォントを作成し、そのビットマップフォントを使って文字を描画します。

この記事では Glyph Designer で NGUI 向けのビットマップフォントを作る方法を解説します。あくまで一例ですので、実際に作業する時にはゲームの雰囲気などに合わせ適宜調整して使用して下さい。

ビットマップフォントの作成

まずは使用するフォントを選択します。今回は「Hiragino Kaku Gothic Pro」を選択する事にします。検索ウィンドウで検索すると便利です。

次にフォントサイズの変更。ウィンドウの左下に有るスライダーを移動すると調整出来ます。今回は20に設定します。丁度良い位置に止まらない場合はスライダーの左右に有る「A」ボタンを押すと1つづ加減出来ます。

そして、もろもろ以下の赤枠の箇所を変更。



「Included Glyphs」ではビットマップフォントに含める文字を設定します。ここに記載されている文字がビットマップに含められます。その為、含めたい文字の一覧を準備する必要が有ります。こちらに Shift JIS に含まれる文字の一覧を準備しましたのでこちらからコピペして下さい。

厳選された漢字だけを含める場合

なおここで使った Shift JIS に含まれる文字の一覧で作成した場合は実際にUnityで表示した時に同じ文字サイズで作った ASCII の範囲だけのものと見比べると Shift JIS の一覧を使った方は文字がぼやけてしまいました。

【 ASCII 】　　【 Shift JIS 】

おそらく、対象となる文字数が多すぎるのが原因では無いかと思います(確実な原因は突き止められていません)。(※原因が分かりました。詳細は別途記述)そこで本当に主要なものだけの文字一覧は無いかと考えた所、 id:dearna さんの Selected U3D Japanese Font の事を思い出しました。こちらでは漢字の部分は「小学校６年生までの教育漢字」「都道府県表記、ゲーム用語に適した漢字」と本当に使用頻度が高いと思われるものだけが選択されています。こちらは Unity の Asset Store でも配布されていますがサイトの方ではより収録している漢字を改良されたものが置かれているのでこちらからダウンロードする方が良いでしょう。

Selected U3D Japanese Font - 俺がぐったり部だ！
http://d.hatena.ne.jp/dearna/20110419/1303207066

現在は u3dfont102.unitypackage (2011/05/19) というものが最新ですのでこれを元に文字の一覧を取得する方法を書いておきます。

このパッケージの中の SU3DJPFont/list.txt というのが該当のファイルです。今回はこれだけをインポートします。
このファイルをダブルクリックしてエディタに表示したものがこちらに成ります。

これを見るとコメントが書かれていますがコメントで使っているものは使用する文字の一覧に含まれている文字ですので、そのまま全部コピペして問題有りません。なお、 Glyph Designer では同じ文字が複数有った(例えば貼り付けたテキストの中に A が3つ有るなど)としてもビットマップフォントにはその文字は1つしか格納されません。

しかし、この一覧を使った場合にはどうしても厳選された漢字だけが採用されている関係で、例えば「覇王翔吼拳を使わざるを得ない」という少々、マニアックな漢字が含まれたテキストを使うとUnity上では収録されていない文字は省略され「王を使わざるを得ない」と表示されてしまいます。

もちろん、ある程度使いそうな漢字が分かっている場合にはそれらの漢字を追加する事で対応が可能です。しかし、完全にどの様な文字が使われるか予想出来ない場合にはこの方法は使えません。

取り敢えずここでは Shift JIS に含まれる文字の一覧を使ったとして話を進めます。

次に「Update」ボタンを押すとプレビュー画面が更新されるのですが、この処理がかなり重いです。英語だと文字数が少ない為、直ぐに終わるので気になりませんが日本語の様に文字数が多い場合はとても処理が重いです。

ハングアップしたかの様な状態になり、他の Glyph Designer 以外のアプリの動作も極端に重くなります。同時に他の作業を行うはやめておいた方が良いでしょう。

処理時間はマシンのスペックによりますが2〜10分程度で終わるかと思います。

設定は以上で終了です。画面右上の「Export」ボタンを押して、ビットマップフォントを出力しましょう。

今回はこの様な設定とファイル名で出力します。
※この処理も少々、時間がかかります。

ここでは「Export type」に EZ GUI Text を選択していますがこちらの設定で出力したものは NGUI でも利用可能です。

これで font.png と font.txt という2つのファイルが出力されたはずです。 font.png がビットマップフォントの画像ファイルで font.txt が文字の位置情報などを保存したファイルとなります。

NGUI 向けに変換

1. Unity を起動し、新規プロジェクトを作成し、 NGUI をインポートします。
2. font.png と font.txt を Project ビューにドラッグして追加します。

(追記)
Shift JIS に含まれる文字だと表示がぼやける問題の解決方法。

ここで追加した font.png を Unity 上で選択し、テクスチャの Inspector の「Max Size」を 2048 に変更して、「Apply」ボタンを押します。

これでぼやけない様に成ります。ぼやける原因としてはビットマップフォントの画像サイズが 2048x2048 にも関わらず、ここの設定がデフォルトで 1024 になっている為にぼやけてしまっていた様です。
(追記ここまで)

3. メニューから「NGUI」→「Font Maker」を選択します。

表示されたウィンドウの「Font Data」の項目には書類のアイコンの付いている方の font をドラッグします。下の「Texture」にはもう一つの font をドラッグします。「Font Name」を「MainFont」に変更して「Create a Font without an Atlas」ボタンを押します。このボタンが表示されていない場合にはウィンドウの縦の長さを長くしてみて下さい。

この作業でマテリアルと Prefab が追加されます。

これで NGUI 向けのフォントの作成が完了です。今まで NGUI に付属している「SciFi Font - Header」や「SciFi Font - Normal」の変わりに今回作成した Profab(MainFont) を選択すると利用可能です。

Tips

ここでフォントの色をデフォルトの黒から白に変更したのにはちゃんと理由が有ります。

ビットマップフォントの色が白だと UILabel などの「Color Tint」の項目の色を変更するとフォントの色をその色に変更する事が可能だからです。


黒だとここの設定が反映されず、常に黒で描画されます。黒以外で使う予定が無い場合であればデフォルトの黒のままでも問題有りません。

関連情報

NGUI 向けのビットマップフォントを作成出来るアプリ一覧 - 強火で進め
http://d.hatena.ne.jp/nakamura001/20120908/1347136958