UE5.5 のリリースノートでフォントの距離フィールド(Distance Field)が紹介されていますが、具体的な使い方を紹介されているページが見当たらなかったので書いてみます。
先にざっくりまとめると、プロジェクト設定で有効化し、フォントフェイスの有効化フラグを立て、FontSignedDistance ノードを使ったマテリアルを作成し、TextBlock のフォントマテリアルに設定し、Material Is Stencil のチェックを入れたら適用できます。
詳しく説明してきます。
手順① プロジェクト設定
プロジェクト設定の「エンジン - ユーザーインターフェイス」の「距離フィールドのフォントビジュアライゼーションを有効化」にチェックを入れる
手順② フォントの Distance Field を有効にする
フォントフェイスのアセットに対して Distance Field を設定する必要があるので、既に使っているフォントに対して使いたい場合は複製してください。
ここではエンジンの Robot フォントを複製してそれぞれの名前に _SDF をつけています。
各フォントフェイスを開き、Enable Distance Field Rendering にチェックを入れます。
チェックを入れると細かいパラメータが出てきますが、とりあえず試す分にはデフォルト値で良いでしょう。
一通りフォントフェイスの設定が終わったら、忘れずフォントアセットが参照しているフォントフェイスを _SDF をつけたアセットに差し替えます。
手順③ フォントマテリアルを作成
マテリアルのアセットを作成します。
Material Domain は UserInterface、Blend Mode は Translucent にします。
FontSignedDistance ノードを配置します。
ひとまず Contents Example を参考にこんな感じにしてみました。
必要に応じてマテリアルインスタンスも作成しておきます。
マテリアルインスタンスでパラメータをこんな感じにしました。
手順④ UMG で Text Block に設定
UMG のテキストブロックの詳細パネルで、手順②で作成したフォントと、手順③で作成したマテリアル(or マテリアルインスタンス)を設定して、Material Is Stencil にチェックを入れます。
これでマテリアルで設定した Glow が適用されます。
一度ここまで作っておけばあとは手順④だけで手軽に適用できます。
もしこのマテリアルで思った色がでない場合、別途 Color and Opacity 等で色を付けていないかチェックしてみてください。
後記
公式の Content Examples(機能別サンプル)の UI_UMG レベルの右奥のほうに Glow 以外にもいくつかサンプルがあるので、チェックしてみてください。