真・簡単(かもしれない)日本語表示

Artikel
02/19/2012

2012年６月4日追記新しい機能を追加したものを投稿しました

いままで、ひにけにXNAではXNAで日本語表示する為の投稿を複数回してきました。

続・簡単(かもしれない)日本語表示: ツールによる日本語文字の追加
簡単(かもしれない)日本語表示: プロセッサー・パラメーターを使った日本語文字の追加
Content Pipeline その３そのカスタマイズ: XNA 1.0時代のコンテント・パイプラインのカスタマイズの例として紹介

こうやって見返すと、今までの投稿ではいかにして簡単に日本語文字を追加するのかということを紹介してきました。

XNA標準のフォントプロセッサーでは、これ以外にも以下の基本的な問題があります。

OpenTypeフォントが使えない
大量の文字を処理させると時間が掛かる

これらの問題を解決するには新しいフォントプロセッサーを作ることですが、独自のフォントプロセッサーを作ってしまうと、それに伴って独自の表示プログラムも用意しないといけません。XNAで用意されているSpriteFont描画に慣れている人達が多く居るなかで、似たような、だけどちょっとだけ違う文字表示APIを作るというのには抵抗がありました。

ですが、XNBファイルフォーマットが公開され、Silverlight 5のToolkitの中ではXNA 4.0のコンテント・パイプラインをそのまま使用し、Windows用のXNBファイルから直接3Dモデルなどを読み込んで、Silverlight 5で表示することができると知ったときに思いついたのが 「同じデータを出力してSpriteFontになりすまことができれば、実行時にXNAの文字描画APIをそのまま使うことができるかも？」 というアイディアが浮かんだので試してみたら、思ったよりも良い物ができたので公開することにしました。

WPF フォントプロセッサー

今回紹介するのはWPFを使用したWPFフォントプロセッサーです。WPFを知らない人の為に補足しておくと、WPFはWindows Presentation Foundationの略で今までのGDI/GDI+を使ったUIフレームワークとは違い、GPUアクセラレーションを利用した新しいUIフレームワークです。SilverlightはWPFのサブセットでWindows Phone 7でも使われいて、Windowsの後継OSであるWindows 8の新しいアプリケーションモデルの1つであるXAMLアプリケーションはこのWPFが元となっています。

WPFフォントプロセッサーはその名の通り、WPFの文字描画を使用したフォントプロセッサーです。特徴としては以下の3つがあります。

OpenTypeフォント対応
処理速度の高速化
JIS漢字追加機能
文字装飾

WPFは今までのようにTrueType、そしてOpenTypeフォントに対応しています。OpenTypeフォントはOpenの名が示すとおりOSに依存しないフォントフォーマットで、現在広く普及しているフォントフォーマットです。OpenTypeフォント対応によって、これらの多くのフォントをXNAで作られたゲームでも簡単に使えるようになりました。

そして、処理速度の高速化ですが、XNA標準のフォントプロセッサーは生成したテクスチャをできるだけコンパクトにまとめる為のアルゴリズムを採用しています。ですが、文字数の増加に対して指数関数的に処理時間が掛かってしまうという問題があります。ゲーム内で使われる文字だけを抽出して生成する場合は1,500文字程度で収まるので大きな問題とはならないのですが、常用漢字やJIS漢字といった2千文字を超えてくると極端に時間が掛かるようになり、場合によっては20分近く掛かってしまうということがありました。

そこで、WPFフォントプロセッサーでは漢字などの大量の文字を処理するのに適したアルゴリズムを採用して処理速度の高速化をしています。以下は私のPCで測定した結果です。

文字数	XNAフォントプロセッサー	WPFフォントプロセッサー	速度差
常用漢字を含む2,331字	3分20秒	0.6秒	333倍
JIS第1水準漢字を含む3,438字	10分28秒	0.82秒	765倍
JIS第2水準漢字を含む6,974字	N/A	1.63秒	N/A

このように処理速度の劇的な高速化ができたので、大量の文字を必要とするゲームも手軽に作れるようになりました。これだけ速くなると、今までは処理速度の関係で使うのを躊躇していたJIS基本漢字も使いたいところです。そこでWPFフォントプロセッサーではプロセッサー・パラメーターでJIS基本漢字を簡単に追加できるようになっています。

WPFの文字描画では色々な装飾を施すことができるようになっています。WPFフォントプロセッサーでは、グラデーション文字、アウトライン文字をプロセッサー・パラメーターで指定できるようになっています。以下の画像はグラデーション、アウトライン、そしてそれらを組み合わせた文字の例です。

20120219 WpfFont

WPFではこれ以外にも様々な文字描画カスタマイズができるようになっています。WPFフォントプロセッサーでは、文字描画部分が仮想メソッドとなっているので、カスタム・コンテント・プロセッサーをWPFフォントプロセッサーのクラスから派生させることにより自分の好きな描画に差し替えることができるようになっています。

WPF フォントプロセッサーの使い方(基本編)

WPFフォントプロセッサーを使うのは以下の２つのステップで完了します。

WpfFontPipeline.dll(ダウンロードURLはページの最後)をコンテント・プロジェクトの参照設定に追加する
Spritefontファイルのコンテンツプロセッサに「WPF フォントプロセッサー」を選択する

WPFフォントプロセッサーは、既存のXNAのSpritefontファイルをそのまま使うことができます。また、プロセッサー自体(WpfFontDescriptionProcessor)もXNA標準のプロセッサー(FontDescriptionProcessor)と互換なので、FontDescriptionProcessorから派生したカスタムプロセッサーの派生元をWpfFontDescriptionProcessor、つまり派生元クラス名の頭に「Wpf」と三文字追加するだけで、そのまま動作します。

WpfFontProcessor01

WPF フォントプロセッサーの使い方(プロセッサー・パラメーター編)

WPFフォントプロセッサーには20のプロセッサー・パラメーターがあります。今まで紹介してきたプロセッサよりもパラメーターの数が多いですが、基本は以下の３つに分類されます

追加文字の指定
文字装飾の設定
文字テクスチャーフォーマット指定

WpfFontProcessor02

追加文字のプロセッサーパラメーターでは半角英数時であるASCII文字、JIS基準漢字で定義されている、記号、全角英数字、ひらがな、かたかな、ギリシャ文字、キリル文字、罫線、そして第1、第2水準漢字を指定することができます。前述の通り、これら全部の文字を含めて7千文字を追加しても数秒で生成できますが、これだけの文字数になるとテクスチャサイズがReachプロファイルの上限である2048x2048のテクスチャサイズに収まらなくなるので注意が必要です。

「追加文字テキスト」パラメーターでは直接追加したい文字を指定することができます。追加文字処理では常に重複する文字を生成しないようになっているので「ああいいうう」という文字を指定しても、実際に生成されるのは「あいう」の３文字になるようになっています。

「追加文字テキストファイル名」には以前紹介した方法のように指定されたテキストファイル内で使われている文字を追加することができます。今回は追加機能としてセミコロン(;)で区切って複数のファイル名を指定できるようになっています。サンプルでもメッセージが入ったソースコードファイルを指定するという小技を使っています。また、文字エンコーディングはOSデフォルト設定にしてあるので日本語版Windowsで使用していればSJISで書かれたテキストファイルをそのまま読むことができます。

文字装飾では文字の色、アウトラインの太さや色、グラデーションの開始色、終端色、角度などを指定することができます。アウトラインの太さには1.5といった小数点を指定することができます。

文字テクスチャフォーマットでは、フォーマットを自動選択するAuto、Bgra4444、そしてColorを選択することができます。Autoを選択すると、単色文字では独自の圧縮処理をするDXT3圧縮(1/4サイズ)、アウトラインを使用するとBgra4444(1/2サイズ)、そしてグラデーションを使用するとColorを使用するようになっています。今年になってXbox Live インディーズゲームに投稿できるゲームサイズ上限値が変更されたので、テクスチャサイズが大きくても綺麗な文字が使いたい場合などに変更すると良いでしょう。

WPFフォントプロセッサーサンプル

いつものように、今回もサンプルプログラムとWPFフォントプロセッサーのソースコードを公開します。

サンプルプログラムはWindows, Xbox 360,そしてWindows Phone 7 (7.1)のプロジェクトが用意されています。このサンプルプログラムでは複数のフォントを使った文字描画をしています。Xbox 360コントローラーのスティック、キーボードの上下キー、マウスのホイールスクロール、そしてタッチとフリック操作で文字をスクロールさせることができます。