unity_ngui_bitmap_font

[NGUI] ビットマップフォントを作る

ビットマップフォントは、ASCIIコードに対してフォント画像を割り当てることで表現します。

 フォントを使用する際の注意点

「[NGUI] フォント(ttf)を埋め込む」に、フォントを利用する場合の注意点を記載。

 テキストが描かれた画像を作成

1枚の画像内に使用する文字を納めたものを用意。以下はPhotoShop Elements 10で作成した画像 512x512 pixelです。text_data.pngというファイル名にしました。

透明になるところはアルファで抜くようにしてください。また、テキストの色は白がよいと思います（Unity側で乗算合成で色指定できるため、オールマイティーになる白が望ましい）。
影やアウトラインの縁取りなどはUnity側でエフェクトとして指定できるため、画像としては白一色で。

 情報ファイルの作成

もう1つ、この画像に対応したASCIIコードと画像上の位置サイズを示す情報ファイルが必要になります。
以下の画像の場合は、(10, 9)が始点でサイズが29x35 pixelの矩形内に「3」の文字が存在します。画像の左上が(0, 0)になります。

それぞれの文字に対してASCIIコードと画像上の位置/サイズを列挙したものを以下のようにテキストファイルに記載します。

text_data.txtというファイル名にしました。以下はスペースを含めた5文字分だけ記載してます。

info face="text_data" size=20 bold=1 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=1,1 outline=0
common lineHeight=35 base=16 scaleW=512 scaleH=512 pages=1 packed=0 alphaChnl=0 redChnl=4 greenChnl=4 blueChnl=4
page id=0 file="text_data_x.png"
chars count=5
char id=32   x=1   y=1   width=1   height=1     xoffset=0     yoffset=0   xadvance=20     page=0  chnl=15
char id=48   x=8   y=9   width=33   height=35    xoffset=0     yoffset=0    xadvance=20     page=0  chnl=15
char id=49   x=38   y=9   width=30   height=35    xoffset=0     yoffset=0    xadvance=20     page=0  chnl=15
char id=50   x=68   y=9   width=33   height=35    xoffset=0     yoffset=0    xadvance=20     page=0  chnl=15
char id=51   x=101   y=9   width=29   height=35    xoffset=0     yoffset=0    xadvance=20     page=0  chnl=15

個々の意味がわかってないのもありますので、examplesのものからたぶんこうだろうと思う部分だけ説明入れます。
一行目のinfoのfaceで、ビットマップフォント名を指定。テキストの情報ファイルと同じ名前にしました。
二行目のcommonのlineHeightでフォントの高さ、scaleWが元の画像の幅、scaleHが元の画像の高さ、それぞれをpixelで指定。
三行目のcharsのcountで列挙する文字の数を指定。以下の行は個々の文字に対するデータです。
なお、「id=xxx」などの項目名と値の指定ではスペースを入れずに詰めて書くようにします。スペースを入れるとうまく認識されなくなります。

char id=32   x=1   y=1   width=1   height=1     xoffset=0     yoffset=0   xadvance=20     page=0  chnl=15

idはASCIIコードを10進数で指定。32番はSpaceになりますので、これは空白なので画像の左上の何もないところを1x1のサイズとして指定。
xadvanceは20固定？（不明）。
文字ごとに変更が必要なのは(x, y)、width x heightの箇所。

char id=48   x=8   y=9   width=33   height=35    xoffset=0     yoffset=0    xadvance=20     page=0  chnl=15

idの48番目は「0」の文字です。(x, y)が(8, 9)の位置からwidth x heightが33x35の領域が画像上の範囲。
なお、個々の文字は横一列に指定している箇所では、同じy値で同じheight値であるほうが揃うかと思います。
同様にすべての文字を列挙していきます。

列挙した文字の数と「chars count」で指定する数は同じになるようにしてください。そうしないと認識されなくなるようです。

ASCIIコード一覧

これについては検索すれば出てきますが、一部列挙。10進数で32〜126のものを埋めるとよいかと思います。

 Unityでビットマップフォントを作成

Unity上でNGUIを使ってビットマップフォントを作ります。
作成した画像「text_data.png」と情報ファイル「text_data.txt」をUnityのprojectにインポート。

projectウィンドウを右クリックして「NGUI」-「Open Atlas Maker」でカラのAtlasを作成。ここでは「TextAtlas」という名称にしました。
なお、既存のAtlasにビットマップフォントを同梱する場合はそれを利用してもOKです。

projectウィンドウを右クリックして「NGUI」-「Open Bitmap Font Maker」を選択。
Font Makerウィンドウで、Inputの「Font Data」に「text_data.txt」を指定、Textureに「text_data.png」を指定します。ドラッグ＆ドロップで指定できます。

Outputで「Atlas」のところに先ほど作成した「TextAtlas」を指定、Font Nameにフォント名を任意の名称で指定。ここでは「NewFont1」という名称にしました。
「Create the Font」ボタンを押します。
すると、TextAtlasにフォントの画像が入り、「NewFont1」というprefabが生成されました。これがビットマップフォントになります。

情報を追記した場合の更新処理は、同じようにFont Makerウィンドウを開くと「Replace the Font」
というボタンが出てきますので、それを押すと更新されます。

 Unityでビットマップフォントを表示

シーンのHierarchyウィンドウで「UI Root」を選択した状態で、メインメニューより「NGUI」-「Create」-「Label」を選択。
LabelのInspectorウィンドウでUI LabelのFontで「Bitmap」に切り替え。左上のFontボタンを押して、先ほど作成した「NewFont1」を選択。
下のテキストエリアに適当に文字を入れます。なお、画像として文字が存在しない場合は、存在しない文字の表示は無視されます。

分かりやすいようにFont Sizeを大きめにして表示すると、以下のようになりました。

Bitmapフォントとして反映されてます。
グラデーションやEffectとしてのShadowやOutlineも有効にすることができます。
ラベルでのテキスト表示については「テキストの表示(Label)」も参照。

最終更新時間：2014年04月13日 14時23分23秒