[UE5] SDFフォントを使って文字にグロー効果をつける

執筆バージョン: Unreal Engine 5.5

皆様こんにちは。
今回はグロー効果のあるフォントをSDF（Signed Distance Field）フォントを使用して作成してみたいと思います。

こんな感じの見た目のやつですね。

SDFフォントとは何ぞや？というのはこちらの公式ドキュメントを参照いただければと思います。
UE5公式ドキュメント：Signed Distance Field Text Rendering

こちらのUnity様のショート動画がビジュアル的にとてもわかりやすく紹介されています！
拡大してもボヤけない！？ SDF フォントで美麗な文字を描画しよう！

SDFに関連する弊社ブログ記事もありますのでぜひ。
[UE5]マテリアルのSDFとは？画像から考える距離場のしくみ

何となくSDFのことを頭の片隅に入れつつグロー効果付きフォントを作成していきましょう。

1.プロジェクト設定でSDFフォントを有効化する

まずはSDFフォントが使えるようにプロジェクト設定を変更します。
Project Settings > Engine > User InterfaceのEnable Distance Field Font Rasterizationにチェックを入れます。

2.フォントフェイスアセットでSDFを有効化します

プロジェクトでSDFフォントを使用する準備が出来たので、次はフォント側でSDFを有効に設定します。
フォントフェイスアセットを開き、下部のEnable Distance Field Renderingにチェックを入れます。
ここではWidgetでTextパネルを追加した際にデフォルトで選択されるRobotのBoldのフォントをSDF有効にしました。
（同じ様に作業される場合はエンジンのコンテンツを編集していることにご留意ください。）

3.SDFフォントを利用してマテリアルでグロー効果を作成する

SDFを有効にしただけでは特に何にもなりません。
SDFのデータをどう使うかを設定してあげないといけません。

SDFはフォントの内側が+の値、外側が負の値を持ちます。以下の様なイメージです。

まずはそれを確認できるマテリアルを作成してみます。

マテリアルを新規作成し、Material DomainをUser Interfaceに変更します。
ノードFont Signed Distanceを呼び出します。フォントのSDFデータを呼び出すノードです。

Signed Distanceのピンから上記の画像で説明したフォントの境界線から内側に向かうほど＋に増えていく数値、
逆に境界線から外側にはなれるほど－に増えていく値を取れます。

まずは境界線から＋方向に増えていく値をグラデーションマスクがわりに使って、フォントの境界線の内側に行くほど赤色、
フォントの境界線に行くほど緑色になるようにしてみましょう。

何らかの数値を使って色を塗り分けるのにはLerpが便利なのでそれを使います。
Signed Distanceからくる値は1以下の小さな値なので、いい感じに0～1までのグラデーションになるように20を掛けます。
－の値や1以上にならないようにSaturateを挟んでいます。

さて、これでフォントに適用するためのマテリアルは出来ましたが肝心のフォントを使うアセットを作らないといけません。

とりあえずSDFフォントを使用したテキストが見れれば良いので適当にWidgetを作り、Textパネルを追加します。
ちゃんとSDFを設定したフォントを使うように設定されているか、Textパネル詳細のFont FamilyとType Faceをご確認ください。

Widgetを作成し、テキストを追加したら、テキストに先ほど作成したマテリアルを適用します。

すると以下の様に、フォントの境界線の内側に行くほど赤色、フォントの境界線に行くほど緑色になるはずです。
（ならない場合はちゃんとSDF設定したフォントを使っているかご確認ください。マテリアルが適用された見た目にならない場合はWidgetのCompileボタンを押すとよいかもしれません。）

これで＋方向のSDFの値の変化を視覚的に見ることが出来ました。

では次に－方向のSDFの値の変化を見ていきたいですが、現在の設定ではどうやってもフォントの境界線の外側をWidgetは描画してくれません。
フォントの境界線の外側を描画してもらうには、マテリアル側で設定したアルファを使うように指定する必要があります。

先ほどのマテリアルを設定した部分の下に、Material is Stencilがあるので、こちらを有効にします。

すると以下の様な見た目になります。特に何も設定していないので０以下の境界線の外側はSaturateで0になっているので緑で塗られた状態になっています。

ここから次はマイナス方向にグラデーションを付けていきます。
先ほどと同じように境界線から－方向に増えていく値をグラデーションマスクがわりに使って、フォントの境界線に行くほど緑色、フォントの外側に行くほど青色になるように設定してみましょう。
それを＋方向のグラデーションとも混ぜてみましょう。

今回は－方向に増える値をLerpのアルファの値に使うので、マイナスを掛けます。
このグラデデーションはフォントの内側は0となる（Staurationをかけた後の値）ので、内側の赤色～緑のグラデーションを混ぜるためのアルファとしても使います。

そうするとこのような見た目になります。

フォントの外側に向かって青色のグラデーションが出来ました。
ここが今回のポイントです。フォントの境界線の外側のグラデーションを使うことで、フォントの外側にぼやっと広がるグロー効果を付けることが出来るのです。

では仕組みの確認用マテリアルではなく、グロー効果用のマテリアルに改修します。

いままでの仕組みでフォント元々の領域＋フォントの境界線の外側の領域のアルファを作り出します。
これをフォント自体のOpacityとして使います。先ほどMaterial is Stencilを有効にしたのでフォントがマテリアルのOpacityを参照するようになっています。
そのためマテリアルのOpacityを使えるようにマテリアルのBlend ModeをTranslucentに変更します。