2D TOOLKIT にフォントを組み込む

20080901-1

そろそろボタンとかオリジナルデザインで作って見たくなってきたのでフォント表示機能を使ってみます。今使用している OS は Windows 7 なのですが、長いことつかってなかった Macbook も引っ張り出してそっちでの作業手順とか後日作ってみたいと思います。

2DTK(以後こう略します)にはビットマップフォントをスプライトとして表示する機能がありますのでそれを使って見ます。ボタンとか各種ユーザインターフェイスはスプライトとフォントの組み合わせで表現します。

手順は簡単なのでとりあえずやってみましょう。

でもその前に大事な事なので

フォントについてはゲームに組み込む場合ライセンスをしっかり確認してください。一番良いのはゲームに組み込みOKなフォントを購入してくるのがトラブルの心配がなくて良いですね。

参考サイト

ゲームに使えるフォント
http://wiki.game-develop.com/index.php?%A5%B2%A1%BC%A5%E0%A4%CB%BB%C8%A4%A8%A4%EB%A5%D5%A5%A9%A5%F3%A5%C8

※ Wiki にも書いてありますがフォントを使用する際には、権利者様に問い合わせを行うなどして各自の責任において判断してください。

フォントデータ作成用ツールの入手

Windowsの場合

Bitmap Font Generator
http://www.angelcode.com/products/bmfont/

download installer for v1.13 をクリックし、インストーラをダウンロードします(2013年10月23日時点)
2dtk20131023-001

ダウンロード後実行し、Bitmap Font Generator をインストールします(ウイルスチェックは忘れずに)
2dtk20131023-002

Mac の場合(Win のみしか手順確認をしてませんので 2D TOOLKIT のマニュアルに記載されていた URL の紹介のみ)
http://www.71squared.com/

ビットマップフォント生成

スタートメニュー → 全てのプログラム → AngelCode → Bitmap Font Generator → BMFont から起動します。
2dtk20131023-003

Options → Font settings でフォント設定を開きます。
2dtk20131023-004

2dtk20131023-005

パラメータの設定についてはこちらのサイトを参考にさせていただきました。

penumbra日本語化 @ ウィキ
http://www11.atwiki.jp/penumbrajp/pages/17.html

Options → Export options でエクスポート設定を開きます。
2dtk20131023-006

設定画面ではとりあえずこのような設定にしておきます。各自好みの設定を見つけてくださいませ。
2dtk20131023-007

フォント設定で指定したフォントの中からどの文字をビットマップにするか選択します。今回は手順説明のみなのでアルファベットと記号と数字があれば十分なので、 一番上の Latin + Latin Supplement をチェックします。 日本語を出力したい場合は漢字を網羅するのが大変なので Hiragana や Katakana のみをチェックするというのも手です。実用範囲内で漢字をエクスポートする方法はまた機会があれば。
2dtk20131023-008

ではプレビューしてみましょう。 Options → Visualize でどういうテクスチャが生成されるか表示されます。できるだけテクスチャにムダができないようにならべてくれています。
2dtk20131023-009

2dtk20131023-010

いよいよビットマップフォントの出力です。 Options → Save bitmap font as… をクリックします。
2dtk20131023-011

フォント出力先のダイアログが表示されますので好みの場所に出力してください。私はマイドキュメントの下に Group_Font というフォルダを作ってここに生成したビットマップフォントを保存するようにしています。今回は MedamaFont という名前で保存しました。
2dtk20131023-012

2D TOOLKIT にビットマップフォントを組み込む

では Unity を立ち上げて組み込みしてみます。「2D TOOLKIT を使ってみようず(後編)」で作業していたプロジェクトに新しいシーンを追加して作業します。

プロジェクトを開いたら File → New Scene で新しいシーンを作成します。
2dtk20131023-013

新しいシーン用のフォルダを作成します。 Assets を右クリックし、Create → Folder の順でクリックし、新規フォルダ名を sample005 にします。
2dtk20131023-014

sample005 フォルダにフォントプレハブを生成します。Assets / sample005 を右クリックし、Create → tk2d → Font をクリックして Font プレハブを作成します。作成後にデフォルトの名前を MedamaFont にリネームしておきます。
2dtk20131023-015

Create → tk2d → Font でフォントプレハブ生成のダイアログが表示されてしまった場合は sample005 フォルダに生成する事を確認してから直接保存ファイル名を MedamaFont にして保存してください。
2dtk20131023-016

フォントの元データをインポートします。BMFont で生成されたファイルは実は2つあります。 fntファイルとテクスチャの画像ファイルです。 MedamaFont.fnt と MedamaFont_0.png を sample005 フォルダへドロップしてインポートしてください。
2dtk20131023-017

MedamaFont の設定を行います。MedamaFont プレハブをクリックしてインスペクタに情報を表示させます。MedamaFont.fnt を Bm Font にドロップ。MedamaFont_0.png を Texture にドロップします。

次に黄色のボタンが表示されますがこれはテクスチャのフォーマットを変換しますか?と聞いてきていますので、データ量の少ない 16bit をクリックして最後に Commit… をクリックします。

これで、ビットマップフォントの登録が完了です。
2dtk20131023-018

フォントスプライトを生成する

ではいよいよゲームシーンに組み込んだフォントを表示してみます。Hierarchy ビューで Create → tk2d → TextMesh をクリックしてフォントスプライトを生成します。
2dtk20131023-019

生成されたフォントスプライトを選択し、インスペクタで Font を MedamaFont にすると見事表示されました。
2dtk20131023-020

表示文字列を変更したい場合はインスペクタで Text プロパティを変更してください。BMFont で生成しなかった文字は表示できないので注意してください。フォントテクスチャは1枚の画像に全ての必要な文字を含める必要がありますのでフォントのクオリティと文字数と相談しながら試行錯誤してみてください。
2dtk20131023-021

次回はオリジナルボタンの作成

スプライトにタイルマップ、UI とフォントの使い方がこれでわかったので次回は独自にボタンを作成してみたいと思います。これでなんとかゲームを作る準備が整った・・・かな?

忘れてた、シーンファイルを保存しなきゃ!

File → Save Scene をクリックし、Assets / sample005 の下に sample005 の名前でシーンファイルを保存して Unity を終了してください。
2dtk20131023-022

2dtk20131023-023

作業にするとすぐなんですが、説明書くのけっこうきっついね。

「シェアする」

ツイートツイート