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

問題報告をツイッターでつぶやくと……

以前紹介したWPFフォントプロセッサーを使ってくれている人からツイッターの方で不具合報告がありました。

不具合報告は太いアウトライン描画をすると下図のような状態になるというものでした。

Issue

これはWPFのアウトライン描画時の使用するペンに線を繋げる時の方法を指定するPenLineJointというプロパティがあり、それがMiterになっていることが原因でした。これをBevel、もしくはRoundにすると問題は解決します。

また、アウトラインを描画するとフォントの上にラインを描画するので、小さなサイズのフォントでは1、2ピクセルの太さのアウトライン描画をすると下図のようにアウトラインが文字に覆いかぶさった状態になってしまいます。

StrokeOverFill2

今回、不具合を報告してくれた方がしていた方法として、アウトライン描画をした後にもう一度アウトライン無しで文字を描画することで、小さい文字でも綺麗に見えるようにしていました。同じ方法はAdobe After Effectのテキスト描画の時にアウトラインを先に描画するのか、後に描画するかを指定できるようになっています。

FillOverStroke

 

 

WPFフォントプロセッサーが更新される

この二つの機能は便利なので早速WPFフォントプロセッサーに取り入れることにしました。今回追加したのは以下の二つのプロセッサーパラメーターです。

  • アウトライン形状
  • アウトライン描画方法

アウトライン形状には、Miter(鋭角)、Bevel(ベベル)、そしてRound(円形)のいずれかを設定できるようになっています。それぞの違いは下図の、特に「W」の文字で違いが分かると思います。

StrokeShape

そして、アウトライン描画方法には以下の3つの方法を指定することができます。

  • StrokeOverFill 文字本体描画の後にアウトラインを描画する
  • FillOverStroke アウトラインを描画した後に文字本体描画する
  • StrokeOnly アウトラインのみを描画する

 

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

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

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

Untitled-4

サンプルは以下のURLからダウンロードできます。

http://higeneko.net/hinikeni/sample/xna40/WpfFont20120604.zip

XNA 4.0で用のWpfFontPiepline.dllは以下のURLからダウンロードできます。

http://higeneko.net/hinikeni/sample/xna40/WpfFontPipeline20120604.zip