マテリアル エディタ - UV 座標のアニメート方法

UV 座標をアニメートするための操作ガイド

Windows
MacOS
Linux

マテリアルにモーションを加える機能は、特に、炎、水、煙などのエフェクトを再作成しようとするときには必須です。 アンリアル エンジン 4 (UE4) でこれを行うための非常に負荷が低く効率的な方法は、Panner マテリアル式 ノードを使用するものです。 Panner マテリアル式ノードではテクスチャの UV 座標を、U または V の方向またはその両方を組み合わせて移動することができます。

UV 座標のアニメートとは?

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

Panner ノードの内容

以下は、マテリアル グラフに追加した後、Panner ノードがどのように見えるかを示しています。 Panner ノードは Coordinates と Time の 2 つの入力を取り込み、結果を出力します。 Panner マテリアル式ノードをマテリアル グラフに追加するには以下の手順に従います。パレット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 パニングを使用するようにテクスチャをセットアップするには以下の手順に従います。

このチュートリアルでは、プロジェクトに スターター コンテンツ を含めると利用できるコンテンツを使用します。プロジェクトにスターター コンテンツを含まなかった場合は、 プロジェクト間のコンテンツの移動に関する情報を 移行 コンテンツ ページでご覧ください。こうすることで、新しくプロジェクトを作成せずにスターター コンテンツをプロジェクトに追加できます。

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

    AU_Creat_New_Material.png

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

    AU_Find_Fire_Texture.png

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

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

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

    AU_Making_Connections.png

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

  7. Speed X0.1 に設定すると、プレビュー ウィンドウで炎のテクスチャが水平に動き始めるのがわかります。

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

コツとヒント

他のマテリアル式と組み合わせてパニングを使用することは、パニングがどのように機能するかの制御を強化するうえで優れた方法です。 以下の例では、上記で作成したマテリアルにさらに手を加え、速度だけでなくタイリングの制御を強化しました。 TexCoordTime のマテリアル式を乗算する数を大きくすることで、炎のテクスチャの速度とタイリングを調整することができます。

AU_Adding_More_Controal.png

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

まとめ

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

タグ
Select Skin
Light
Dark

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信