UV 座標をアニメートする

マテリアルの UV 座標をアニメートするためのガイドです。

Choose your operating system:

Windows

macOS

Linux

マテリアルにモーションを加える機能は、炎、水、煙などのエフェクトを再現する方法を提供する重要な技術です。Panner Material Expression ノードを使用すると、低い負荷で効果的にこれを行うことができます。Panner ノードでは、時間の経過に伴って変化する UV 座標を生成し、U または V の方向、またはその両方を組み合わせてテクスチャを動かすことができます。

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

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

Panner ノードの詳細

Panner マテリアル式 をマテリアル グラフに追加するには、パレットで Panner を検索するか、右クリックして表示されるコンテキスト メニューを使用します。P キーを押したままにして、マテリアル グラフ内の任意の場所を左クリックし、Panner をマウス ポインタで挿入することもできます。Panner マテリアル式では、CoordinatesTime の 2 つの入力を使用します。

Panner Material Expression

プロパティ

説明

Coordinate

式を修正できるベース UV のテクスチャ座標を取得します。

Time

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

Panner detail properties

プロパティ

説明

Speed X

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

Speed Y

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

Const Coordinate

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

Fractional Part

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

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

UV パニングを使用してテクスチャをアニメートするマテリアルを作成するには、以下の手順を実行します。

このチュートリアルでは、Unreal Engine の「Starter Content」にあるテクスチャを使用します。プロジェクトに「Starter Content」が含まれていない場合に、プロジェクト間でコンテンツを移動させる方法については、「コンテンツを移行する」を参照してください。こうすることで、スターター コンテンツを新規作成せずにプロジェクトに追加することができます。

  1. まず、新しいマテリアルを作成します。コンテンツ ブラウザで 右クリック して、コンテキスト メニューの [Create Basic Asset (基本アセットを作成)] セクションで [Material (マテリアル)] を選択します。

    Create Material

  2. コンテンツ ブラウザで、マテリアルのサムネイルを ダブルクリック し、マテリアル エディタで開きます。

    Open Material

  3. Starter Content」フォルダで、T_Fire を検索します。T_Fire_Tiled_D テクスチャを左クリックして、コンテンツ ブラウザのマテリアル グラフに直接ドラッグします。

    Drag fire texture into Material

  4. Panner マテリアル式をグラフに追加します。ホットキー (P) を押したままにして、マテリアル グラフを左クリックするか、パレットで「panner」を検索します。グラフは次のようになります。

    Panner and texture in Material graph

  5. Panner の出力を Texture Sample の UVs 入力につなげます。テクスチャの出力を Main Material ノードの Base Color 入力に渡します。

    Connect nodes to Base Color

  6. テクスチャをパニングさせるには、最初に Panner マテリアル式を選択します。次に [Details (詳細)] パネルで Speed X パラメータを「0.1」に設定します。

    Set Speed X in Panner node

  7. Speed X0.1 に変更すると、プレビュー ウィンドウで Fire Texture が水平に動き始めるのがわかります。

  8. マテリアルを コンパイル して 保存 し、レベル内のオブジェクトに適用できるようにします。

    Compile and save

ヒントとコツ

他のマテリアル式とパニングを併用すると、パニングの機能をさらに細かく制御することができます。次の例では、テクスチャ TilingSpeed XSpeed Y を制御するために、3 つのスカラー パラメータが追加されています。これらはパラメータであるため、マテリアル インスタンスの値をオーバーライドしてマテリアルの外観をカスタマイズすることができます。

Panner マテリアル式を重ねて、より複雑な動きをしているように見せることもできます。多数のテクスチャを重ねて異なる速度でパニングしたり、マスクでブレンドすると、高度な結果が得られ、水、煙やビジュアル エフェクトに役立ちます。

この例では、すべてのオリジナルのマテリアル式ノードのコピーが、すべてのマテリアル式ノードを選択して、キーボードで Ctrl + D キーを押して作成されています。スケール、パニング方向や新しく作成されたノードの速度が、レイヤー化されたモーションであるような印象を与えるように変更されました。新しい一連のノードが、Base Color ではなく Emissive Color に渡されることで、マテリアルがさらに炎らしく見えます。

まとめ

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