環境：UE5.4
作成マテリアル：M_UVScroll

前書き

テクスチャを移動させるためには、UV座標の操作が不可欠です。今回のチャプターではテクスチャをスクロールさせるための簡単な計算方法を解説します。その際に使用するのが、「Add」ノードです。このノードを活用して、テクスチャの動きをコントロールする手法を見ていきましょう。

手法

前回作成したマテリアルを元に進めます。右クリックで表示されるサイドメニューから「Add」ノードを探して追加し、TexCoordとTextureSamplerの間に接続します。

プレビューを見ると、変化が起きていません。「Add」ノード内の値を変えてみましょう。

犬が１匹ではなく、たくさん表示されてしまいましたね。UEにテクスチャをインポートする際はデフォルト設定はテクスチャのラッピングモードがWrapになっています。
「Wrap」はシームレス（＝無限に繰り返す）対応に使用され、「Clamp」はテクスチャの表示範囲だけに限定する設定です。この違いを覚えておきましょう。
次にテクスチャ設定を開き、以下の画像のように「Wrap」から「Clamp」に設定します。

そうすると、犬が逃げてしまいました...

それは「+1」を足しているのでUVマップ上では犬が左上の方向に移動しました。スクロール幅が大きすぎましたが、スクロール自体が成功した証拠です。移動が早すぎて、プレビューに表示されていません。
何が行われたかを説明するためにこちらのGIFを制作しました。

このようにUV座標が変化されます。(0,0)値が(1,1)になったため、元の(1,1)（右下の角）が左上に移動しました。
試しに1ではなく、0～1の間の数値を入力してみてください。前より移動幅が小さくなるため、犬はプレビュー範囲で表示されます。

方向を変える

左上に動かす方法を確認しました。他の方向に動かすためには、UとVに対する加算を分けて適用する必要があります。これについても一緒に見ていきましょう。

UVを分離するには「ComponentMask」ノードを使用します。名前は「Mask」となっていますが、スライドメニューで「ComponentMask」と入力して検索すると出てきます。

ノードのヘッダーに「RG」と書かれています。これはRedとGreenチャネル適用されていることを示しています。ノードを選択し、左側の「Details」パネルを確認します。
ここで「G」のチェックを外します。

「TexCoord」ノードを「ComponentMask」ノードに繋げます。
「▼」を押すとノードのプレビューが表示されます。
「R」だけが抽出されたことが確認できます。試しに「G」のみにしたり、「RG」に戻したりしてみてノードのプレユーを確認してみてください。

---

そのままでAddに繋げると、UVのV情報がなくなったため、犬の表示がおかしくなりました。画像はUだけでは成立しません。画像は2次元なので、必ずUとVをセットにする必要があります。

このように、「R」と「G」を「AppendVector」ノードに繋げたら犬の表示が直ります。

Appendノードについて

「Append」は、2つの値を1つに統合するノードです。例えば、左右方向だけに何か計算処理を行いたい場合、計算が他の軸に影響しないよう「ComponentMask」で特定の軸を抽出します。計算が終わったら、もう1つの軸と統合するために「Append」ノードを使用します。

UVの分離について理解が難しい方は、数学のベクトルの基礎を検索して少し調べることをお勧めします。ゲーム開発では重要な数学の概念であり、欠かせないものなので、ぜひ学んでおきましょう。

以下、全方向に対応するマテリアルです。

おまけ

おまけに、「Add」ノードに数値を直接入力せず、パラメーター化してマテリアルインスタンスで使用できます。
スライドメニューから「ScalarParameter」を検索して任意のパラメーター名を定義して「Add」に繋げます。

パラメーター化しないと、インスタンスから値は変えられませんのでインスタンス毎に調整したい変数の場合は値をScalarParameterに変更しましょう。

終わりです！
マテリアルインスタンスの作成は次回のチャプターで解説します。