UE5/UEFNマテリアルで作る流れるデジタル警告サイン #10

Takuya

2024年7月17日 20:57

本記事に興味を持っていただきありがとうございます。

今回は、マテリアルを使って以下のような流れる警告サインを作っていきます。

今回使用するアセット

警告用テクスチャ

よりデジタルさを表現するためのテクスチャ

警告板となるメッシュ

これら３つ、ダウンロードしてプロジェクトにインポートしましょう。

新規マテリアルを作ろう

新規マテリアルM_Warningを作り開きます。

今回のような表現をマテリアルで行う場合、複数の方法がありますが、
本記事では、白黒画像を使用するので、黒色の部分を透過させます。
M_Warningマテリアルの以下の設定を変更します。
Blend Mode　Opaque → Masked
Shading Model　Default Lit → Unlit
Two Sided　□ → ✓

Maskedについては、以下の記事で簡単に紹介しています。

Shading Model
Shading Modelとは、マテリアルに光が入った（入射光）時にどのように反射させるかを制御します。

Unlit
Unlitとは、基本的に火や光を発するオブジェクトなどに使用します。

Two Sided
Two Sidedとは、マテリアルを適応するオブジェクトの裏側（裏面）にも表示させます。

変更後は、以下の通りです。

Texture SampleノードにT_Letterテクスチャを追加して、
パラメーター化します。
パラメーター名はLetterにしています。

左右に文字を動かすために、Pannerノードを追加して動きの方向と速度を調整するために、Parameterノードを２つ追加します。
Parameterノードはショートカットキー（Windows）キーボードの
S＋左クリックで追加できます。
Parameter名
Speed X
Speed Y

続いて、Appendノードを追加して以下のように繋ぎます。

なぜAppendノードが必要か？
テクスチャには、UVと言う概念があり値は
U（横方向（X））とV（縦方向（Y））になります。
UVに関しましては、以下の記事で紹介しています。

少しUVの実験をしてみます。

LetterノードをStart Previewing Nodeして、プレビュー画面のオブジェクトをSphereからPlaneに変更します。

Speed Xの値に１を入れると、縦方向にテクスチャが動きます。
Speed Yでは、横方向に動きます。
XとYの両方に１を入れると、斜め左上に向いて動きます。
数値を上げれば、スピードが速くなります。

それではAppendノードを飛ばして、SpeedXとSpeedYを順番にPannerノードに繋いでみます。

結果は、斜め左上にしかテクスチャが動きません。

今回は、横に（X方向）にだけテクスチャを動かしたいので、
Appendノードを使用して独立した値（SpeedXとSpeedY）が必要になることがわかります。

Pannerノードの動きを理解したところで、
Speed Xの値を0.03にして、Speed Yを0にします。

ここまでテクスチャ全体を動かしました。
続いては、テクスチャのオフセットをずらします。

テクスチャのオフセットをずらそう

冒頭の完成動画でもわかるように、
T_Letterテクスチャには３種類の警告文が書かれています。
しかし現在は、３種類全て表示されています。

これを、テクスチャのオフセットをずらして調整します。

冒頭でインポートしたメッシュ、SM_Warning_Tapeをビューポート上に配置し、マテリアルのプレビューをSM_Warning_Tapeにします。

SM_Warning_Tapeを選択したまま、マテリアルエディターに移動します。

マテリアルエディターのプレビューの一番右下のアイコンをクリックします。
すると３行あった警告文の１行のみ表示されています。

- 補足 -
本記事とは関係ないですが、このメッシュ（SM_Warning_Tape）はDCCツールで必要に応じてUV展開しております。

これで、警告文が一行のみ表示されました。

オフセットをずらすノードを組む

オフセットをずらすために必要なノードです。
Parameterノード　→　UV X
Parameterノード　→　UV Y
Multiplyノード　→　Bの値に0.05
Clampノード
Appendノード
Addノード
以下様に、ピンをつなぎます。

上の画像を見てもわかるように、オフセットのずらし方もaddノードを使い、最終的にはテクスチャのUVに入力しているので、
２つの値U（X横方向）とV（Y縦方向）が必要となり、
その為にParameterノードを２つ用意しました。

Clampノードとは

Clampノードは入力された値を0（Min）～1（Max）の範囲以内で出力します。

- 例 -
現在Clampノードの前にMultiplyノードがあります。
MultiplyのAの値に4、Bの値に0.05（4×0.05=0.2）0.2となりClampから出力される値は0.2です。
もしMultiplyのAの値に24、Bの値に0.05（24×0.05=1.2）1.2となり１を超えたので、出力結果は１になります。

０以下は、すなわち負数の場合は全て0で出力されます。

※MinとMaxの値は変更可能

今回は警告文が縦並びなので、Yに値を入れると警告文のオフセットがずれます。

UV Yの値に、４を入れてみましょう。
以下のように２番目の警告文が表示されます。
８を入れると３番目の警告文が表示されます。

どの様に動いているか動きを確認するために、一度プレビューのメッシュをPlaneにもどし、LetterテクスチャをStart Previewing Nodeを行います。

UV Yに４と８を入れると、表示させたい警告文が順に上に移動（ずれて）います。

この方法でオフセットをずらして、SM_Warning_Tapeに表示させたい警告文を表示させています。

Multiplyノード値ですが、Bの値に0.05が入っています。
Bの値を細かくすれば、オフセットはより小刻みに動かすことができます。
Bの値は固定して、Aの値で動かすようにすると調整しやすいです。
今回はAの値（UV Y）は４の倍数でBの値が0.05がちょうどいいのでそのようにしています。