UE4で扱えるフォントは大きく分けて２種類あります。これは実装方法によって分けられています。ひとつは Runtime（ランタイム）と呼ばれるもので、これはTrueTypeFontやOpenTypeFontでおなじみのアウトライン情報をメモリに埋め込んで利用します。文字の量が膨大になっても容量は少なくて済み、またどんなサイズでもキレイに表示できるのでコスパ的にセリフや字幕、説明用のテキスト表示に最適です。
もう一つが、Offline （オフライン）と呼ばれているもので、これは昔からある手法で、文字をラスタライズ（ビットマップ化）してテクスチャにします。後からPhotoshopなどでドット修正できたりフチドリやエフェクトを乗せることができるので使い勝手がいいのですが、最大の欠点は、文字サイズが固定なのと、文字量が増えるとテクスチャ容量が大変なことになるという点です。最近の多言語対応や、テキストチャットなど考えると、漢字だけでも20,000文字越えるので、Runtime のありがたみをしみじみと味わっている今日この頃です。
さてさて
現状 UMGで扱うことのできるフォントは、Runtime（ランタイムフォント）しか使えないようですので、今回はこのランタイムの文字で遊んでみました。
このランタイムフォントは、ラスタライズされていない状態でメモリに載っているので、テクスチャのよう加工方法が使えません。テキストブロックをビューポートに描いた時点ではじめてラスタライズされるからです。えー じゃぁグラデーションは？
ということでDetailsタブをいろいろ調べてみると、どうやらマテリアルが使えるようです。ニヤリ。
まず↓のようなテキストブロックをキャンバスに置きます。
UMGでは斜体が簡単に掛けられるのでイイですよね。
で、マテリアルを作るのですがその前にテクスチャを２枚。
16x128 の24bit Targa
64x64 24bit Targa
それぞれインポートします。
64x64の方は Opacity につなぐので、sRGBを切って Grayscale（sRGBを切るとマテリアル内ではLinearGrayscale） にします。
このテクスチャを使ってマテリアルを作っていきます。
緑のノードは、ScalarParameterValue ノードです。 ブループリントから触れるようにしたり、マテリアルインスタンスから触れるようにするためのノードです。 とりあえずパラメータ名 を "param" にしました。パラメータ名をセットすると、ノード名のように表示されます。フェードインすさせるので初期値は 0.0 がいいのですが、このあと作業しづらいので、いったん 1.0 にしておきます。
UMGで使うので、右端のマテリアルドメイン（マテリアル属性）はUser Interface を選択します。
マテリアル完成です。Apply してSaveしたらウィンドウを閉じてOK。
ここでUMGに戻って、さっきキャンバスに置いたテキストブロックにセットします。
エディタウィンドウ右のDetailsタブにある Appearance ＞ Font の中です。
このままでは何も変化しないので、アニメーションを作ります。
適当にこのテキストブロックがフェードインしてくるのを用意します。
1秒かけてアルファを 0.0 から 1.0に 上げています。
このアニメーションを再生するようにします。
エディタをGraphモードにして、Event Construct ノードにつなぎます。
Event Construct ノードはビューポートに描かれたタイミングで処理が流れてくるイベントです。
この辺で、いったんコンパイルして保存します。
レベルブループリントで以下のようにノードをつなぎます。
Create Widget ノード に Add to Viewport ノードです。Class のところに上で作ったWidgetをセットします。
Playして確認してみると、
まぁフツーですね。
このアルファを使ったフェードインを、マテリアルに仕込んだパラメータに渡します。
以前にこの方法を紹介していたので貼っておきます。
マテリアルを操作するためには DynamicMaterial を作ってやる必要があります。過去記事では Image パーツから Get Dynamic Materialノードで進めていますが、同じ方法で テキストブロックのマテリアルからDynamicMaterialが作れないことが判明。困った。
・・・
イロイロ調べた結果、なんとかその方法が見つかりました。
まずブループリント（Widget以外）でやるのと同じように、先に Create Dynamic Material Instance します。（Play Animationノードはひとまず除けておきます）
Parent のところにUMG用に作ったマテリアルをセットしておきます。
キャンバスに置いたテキストブロックは変数化して使うので、Designerモードで Is Variableのチェックボックスにチェックを付けます。
再び編集モードをGraphに戻すと、テキストブロックがエディタ左の Variables の中に並んでいるはずです。これをグラフにドラッグ＆ドロップします。
そこから、下のようにノードをつないでいきます。出力ピンからドラッグして、"get font" とか、"break" 、"make" とかで検索すると速く見つけられます。
これで、ようやくテキストブロックに Dynamic Material が、セットできました。
最後に、よけておいたPlay Animatonノードをつないでやります。
Event Construct はこれで完成。
次に Event Tickです。
アニメーションのアルファ値を拾ってDynamicMaterialに渡します。
なぜか Get Color and Opacity ノードから、直接 Break LinearColor ノードが取り出せないので、いったん Break SlateColor しています。
完成です。
再生してみましょう。
Opacityのアニメーションを改造すると、もっといろんなバリエーションが楽しめそうです。
グラデーションもテクスチャを使わない方法があります。
UMGのRuntimeフォントをアレンジできれば結構オリジナリティも出せて、リッチに見えるので、ネタを思いついたらまた紹介しようと思います。
ではでは
今回はこの辺で
RGB
Alpha
