2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Unreal Engine (UE)Advent Calendar 2024

Day 25

【UE5】Font の Distance Field を試してみる

Last updated at Posted at 2024-12-25

UE5.5 のリリースノートでフォントの距離フィールド(Distance Field)が紹介されていますが、具体的な使い方を紹介されているページが見当たらなかったので書いてみます。

先にざっくりまとめると、プロジェクト設定で有効化し、フォントフェイスの有効化フラグを立て、FontSignedDistance ノードを使ったマテリアルを作成し、TextBlock のフォントマテリアルに設定し、Material Is Stencil のチェックを入れたら適用できます。

詳しく説明してきます。

手順① プロジェクト設定

プロジェクト設定の「エンジン - ユーザーインターフェイス」の「距離フィールドのフォントビジュアライゼーションを有効化」にチェックを入れる

image.png

手順② フォントの Distance Field を有効にする

フォントフェイスのアセットに対して Distance Field を設定する必要があるので、既に使っているフォントに対して使いたい場合は複製してください。
ここではエンジンの Robot フォントを複製してそれぞれの名前に _SDF をつけています。

image.png

各フォントフェイスを開き、Enable Distance Field Rendering にチェックを入れます。
チェックを入れると細かいパラメータが出てきますが、とりあえず試す分にはデフォルト値で良いでしょう。

image.png

一通りフォントフェイスの設定が終わったら、忘れずフォントアセットが参照しているフォントフェイスを _SDF をつけたアセットに差し替えます。

image.png

手順③ フォントマテリアルを作成

マテリアルのアセットを作成します。

image.png

Material Domain は UserInterface、Blend Mode は Translucent にします。

image.png

FontSignedDistance ノードを配置します。

image.png

ひとまず Contents Example を参考にこんな感じにしてみました。

image.png

必要に応じてマテリアルインスタンスも作成しておきます。

image.png

マテリアルインスタンスでパラメータをこんな感じにしました。

image.png

手順④ UMG で Text Block に設定

UMG のテキストブロックの詳細パネルで、手順②で作成したフォントと、手順③で作成したマテリアル(or マテリアルインスタンス)を設定して、Material Is Stencil にチェックを入れます。

image.png

これでマテリアルで設定した Glow が適用されます。
一度ここまで作っておけばあとは手順④だけで手軽に適用できます。

もしこのマテリアルで思った色がでない場合、別途 Color and Opacity 等で色を付けていないかチェックしてみてください。

後記

公式の Content Examples(機能別サンプル)の UI_UMG レベルの右奥のほうに Glow 以外にもいくつかサンプルがあるので、チェックしてみてください。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?