読者です 読者をやめる 読者になる 読者になる

GameProgrammar's Night

ゲームプログラム系の覚え書き

UE4 DistanceField フォントで遊ぶ

UnrealEngine4

 UE4は、DistanceFieldを使ったフォント描画に対応しています。うちのブログでもかなり前ですが扱った話題でもあり、ちょっといじってみました。
 DistanceFieldを使ったフォントテクスチャの利点は、拡大に強かったり、ちょっとした文字装飾をシェーダーで書けることです。詳しくはググってみてください。

 ここでは、UE4でDistanceFieldフォントへの縁取りと、DistanceFieldFontTextureの作り方を紹介します。

縁取りマテリアル

 作ったマテリアルは以下の通りです。

f:id:katze_7514:20160616210438j:plain

 与えているパラメータは、Distance境界値(DistanceThreshold)、縁取りの色(BorderColor)、VertexColor、Fontテクスチャです。
 ifノードで、Distance境界値とFontテクスチャの値を比較して、縁取り部分かテキスト部分かを判定し、対応する色を接続しています。OpacityにつながっているLerpは文字の太さを決めています。

 下図のように描画されます。

f:id:katze_7514:20160616212405j:plain

DistanceFieldFontテクスチャの作り方

 UE4上でDistanceFieldFontの作り方はドキュメントにもEpicWikiにも無かったので、試行錯誤とソースから発掘してみました。以下の手順で作ることができます。

ベースとなるFontテクスチャを作る

 コンテンツブラウザ上で、フォントを作りフォントエディタを立ち上げます。
 詳細パネルのFontCacheTypeをofflineに変更します。

f:id:katze_7514:20160616214031j:plain

 ダイアログが出るのでYESをおして

f:id:katze_7514:20160616214312j:plain

 フォントを選択します。

f:id:katze_7514:20160616214224j:plain

 フォントテクスチャが生成されます。

f:id:katze_7514:20160616220121j:plain

Fontの設定をDistanceField対応にする

ImportOptions

 「詳細パネル」→「OfflineFont」→ImportOptions を開きます。

f:id:katze_7514:20160616214809j:plain

 緑枠で囲った部分が、DistanceFieldの設定です。
 UseDistanceFieldAlphaにチェックを入れます。他の2つのパラメータはDistanceを計算する範囲を示すパラメータです。必要に応じて変えてください。

テクスチャ設定

 テクスチャをクリックして選択状態にします。「ページ詳細」パネルにテクスチャ設定が表示されますので、CompressionをDistanceFieldFontにします。

f:id:katze_7514:20160616215324j:plain

DistanceFieldFontTextureを生成!

 メニューバーのAssetから、「Reimoprt NewFont...」を選ぶとDistanceFieldFontテクスチャが作られます。

f:id:katze_7514:20160616220053j:plain

 完成です。
 あとは、フォントテクスチャを要求されるところで、DistanceFieldFontテクスチャを設定すればDistanceFieldフォントとして描画されます。

 図ではDistanceFieldFontが大きくてテクスチャが2枚になってしまっています。これはテクスチャサイズを変更することで回避することができます。
 テクスチャサイズは、ImportOptionで設定できます。
f:id:katze_7514:20160616220520j:plain

 以上です。
 おもしろい文字装飾マテリアルができたら、ぜひ教えて下さい!