Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

UV 座標をアニメートする

UV 座標をアニメートする方法を説明します。

Choose your operating system:

Windows

macOS

Linux

マテリアルにモーションを加える機能は、特に、炎、水、煙などのエフェクトを再現する場合に必須です。 Unreal Engine 4 (UE4) では、 Panner Material Expression ノードを使用して、低い負荷で効果的に行うことができます。 Panner Material Expression ノードを使って、テクスチャの UV 座標を、U または V の方向またはその両方を組み合わせて移動することができます。

UV 座標のアニメートの概要

UV 座標のアニメートまたは UV パニングするとは、テクスチャの UV 座標を、水平 (U)、垂直 (V)、またはその両方を組み合わせて移動し、複雑なアニメーションが動作しているという錯覚を与えることを意味します。 以下の例では Fire Texture を水平 (U) 方向にパニングすることで、炎が移動しているように見えます。

Panner ノードの詳細

Panner ノードは、マテリアル グラフに追加すると以下のように表示されます。 Panner ノードは Coordinates と Time の 2 つの入力を受け取り、結果を出力します。 Panner Material Expression ノードをマテリアル グラフに追加するには、 パレット で Panner を検索、またはマウスがマテリアル グラフ ウィンドウ内にある状態で、 P キーを押します。

AU_Node_Breakdown.png

プロパティ

説明

Coordinate

ベース UV のテクスチャ座標を取り込むと、式を修正できます。

Time

現在のパニング位置を決定するために使用する値を取り込みます。通常は、Time 式によって一定のパニング効果が得られますが、Constant または Scalar のパラメータを使用して特定のオフセットを設定したり、マチネまたはブループリントでパニングを制御することもできます。

AU_Node_Options_Breakdown.png

プロパティ

説明

Speed X

水平すなわち X 方向にテクスチャ座標を移動する速度。

Speed Y

垂直すなわち Y 方向にテクスチャ座標を移動する速度。

Const Coordinate

座標が未接続である場合のみ使用。

Fractional Part

より高い精度を得るためにパニング計算の小数部のみを出力します。出力は 0 以上 1 未満になります。

マテリアルでアニメートした UV 座標を使用する方法

UV パニングを使用するようにテクスチャをセットアップするには以下の手順に従います。

このチュートリアルでは、プロジェクトに スターター コンテンツ を含むと利用できるコンテンツを使用します。プロジェクトにスターター コンテンツを含まなかった場合は、 プロジェクト間でコンテンツを移動させる方法について「

[コンテンツの移動](Basics/AssetsAndPackages/Migrate)
」を参照してください。こうすることで、スターター コンテンツを新規作成せずに追加することができます。

  1. 最初に コンテンツ ブラウザ で、新規マテリアルを作成します。これを行うには、 コンテンツ ブラウザ で 右クリック し、 [Create Basic Assets (基本アセットを作成)] メニューから [Material] を選択し、「 Panner_Material 」と名前を付けます。 完了すると、 コンテンツ ブラウザ は以下のようになります。

    AU_Creat_New_Material.png

  2. マテリアルを作成した状態で、 コンテンツ ブラウザ でそのマテリアルを マウスの左ボタン で ダブルクリック して開きます。マテリアルを開いたら コンテンツ ブラウザ に戻り、 「Game」 フォルダをクリックし、 T_Fire_Tiled_D という検索用語を用いて炎のテクスチャを見つけます。

    AU_Find_Fire_Texture.png

  3. Fire Texture (炎のテクスチャ) が見つかったら、 コンテンツ ブラウザ からドラッグしてそのマテリアルに入れます。これを行うには最初に マウスの左ボタン で選択し、 マウスの左ボタン を押したままの状態でそれをマテリアルにドラッグします。マテリアル上で、 マウスの左ボタン を放し、テクスチャをマテリアル グラフに配置します。

  4. テクスチャをマテリアル グラフに配置した状態で、 パレット に進み、 Panner を検索します。 Panner マテリアル式が見つかったら、 マウスの左ボタン で選択してマテリアル グラフ内にドラッグします。マテリアル グラフ上で、 マウスの左ボタン を放し、 Panner マテリアル式をマテリアル グラフに配置します。完了すると、マテリアル グラフは以下のようになるはずです。

  5. 必要なノードをすべて追加したので、全部を接続していきます。まず Fire Texture の White の出力を Base Color 入力に接続します。次に Panner の出力を Fire Texture 上の UVs 入力に接続します。完了すると以下のようになります。

    AU_Making_Connections.png

  6. 何もかも接続した状態になったら、Fire Texture をパニングします。これを行うには最初に Panner マテリアル式を選択します。次に [Details (詳細)] パネルで Speed X パラメータを 0.1 に設定します。 AU_Set_Panning_Speed.png

  7. Speed X を 0.1 に設定すると、プレビュー ウィンドウで Fire Texture が水平に動き始めるのがわかります。

  8. マテリアルをコンパイル、保存、および使用する準備が整いました。

コツとヒント

他のマテリアル式と組み合わせてパニングを使用すると、パニングの機能に対してさらに制御をかけることができます。 以下の例では、上記で作成したマテリアルにさらに手を加え、速度だけでなくタイリングの制御を強化しました。 TexCoord と Time のマテリアル式を乗算する数を大きくすることで、Fire Texture の速度とタイリングを調整することができます。

AU_Adding_More_Controal.png

Panner マテリアル式を重ねてより複雑な動きをしているような錯覚を起こすこともできます。 この例ではすべてのマテリアル式ノードのコピーは最初にすべてのマテリアル式ノードを選択し、 CTRL + W キーを押して作成されました。 新規作成したノードのパニング方向を Speed X = 0.1 から Speed Y = 0.1 に変更し、画像を水平ではなく垂直に移動するようにしました。 Time と TexCoord で乗算処理されている値を、 1 から 2 に増やしました。 最後に両方のテクスチャは合わせて 乗算処理 され、以下の最終結果が得られました。

まとめ

UV 座標をアニメートすることは、マテリアルにモーションを加える素晴らしい方法です。 煙や炎などの複雑なモーションを必要とするビジュアル エフェクトで非常に役立ちます。 しかし、UV 座標のアニメートは、連続する UV が設定されているオブジェクトで最適に機能します。 メッシュの UV 座標にずれがあれば、UV 座標のアニメート時に表示されます。

Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
閉じる