マテリアル グラフを整理する

コメントや再ルーティングの機能など、マテリアル グラフを整理して読みやすさと使いやすさを向上するための手法を紹介します。

このページでは、Unreal Engine と Unreal Editor for Fortnite (UEFN) の両方に登場する機能について説明しています。

このページは元々 Unreal Engine 用に作成されたものなので、一部の説明やスクリーンショットは UEFN で表示されるものとは異なっている場合があります。

UEFN のメインドキュメントに戻るには、こちら をクリックしてください。

マテリアルが複雑になると、ノード グラフも読みづらく、使用しづらいものになりがちです。複雑で乱雑なグラフでは編集作業の効率も下がり、マテリアルを作成者からアーティストやデベロッパーに渡した際に誤解が生じる原因ともなります。

マテリアル エディタの整理ツール

Unreal Engine には、マテリアル グラフを整理するためのツールがいくつか用意されています。

  1. コメント機能

  2. リルート ノード

  3. 名前付き再ルーティング

  4. 整列と均等配置

  5. 折りたたみノード

コメント機能

コメント機能は、マテリアル グラフの内容をわかりやすくするうえで最も手早い方法です。次のマテリアルは決して複雑なものではありませんが、注釈がないと、次のアーティストなどに渡した際に、内容の理解に時間がかかることがあります。

コメント付きとコメントなしのマテリアル グラフ ネットワーク。

スライダーをドラッグして、コメント付きの同じマテリアルを表示してください。ラベルが付いていることで、各ノード グループの動作をすぐに把握することができます。

マテリアルにコメントを追加するには 2 つの方法があります。

ノードの説明

ノード グラフ内のあらゆるマテリアル表現式または関数に、コメントや説明を個別に追加できます。

  1. マテリアル グラフ内で、マウス ポインタを目的のノードの上に置きます。

  2. コメント切り替えのバブル アイコンを 左クリック します。

    Toggle comment bubble

  3. フィールドにコメントを入力します。

    Enter comment

  4. マテリアル グラフを拡大/縮小表示する際にコメントを表示したままにする場合は、ピン アイコンをクリックします。これにより、縮小表示した際にもコメントが判読可能なサイズで表示されます。コメント切り替えのバブル アイコンを再びクリックすると、コメントを非表示にできます。

    Pin Comment

コメントのバブル ボックスに入力したテキストは、そのノードの [Details] パネルの [Desc (説明)] フィールドに表示されます。この説明は、コメントのバブルが非表示の場合でも表示されます。

Node description box

コメント ボックス

コメント ボックスを使って、関連する複数のノードをグループ化できます。

UV Tiling comment box

  1. コメント ボックスに含めるすべてのノードを選択します。

  2. C キー を押して、選択したノードの周辺にコメント ボックスを作成します。

  3. ヘッダ フィールドに名前を入力します。

コメント ボックスでは、ボックス内のすべてのノードを一つのグループとして移動できます。コメント ボックスを移動するには、そのヘッダ バーを 左クリックしてドラッグ します。

  • ノードをドラッグしてコメント ボックスに入れたり、コメント ボックスから取り出したりすることで、ノードを追加または削除できます。

  • コメント ボックスの隅やエッジ部分をドラッグすることで、コメント ボックスのサイズを変更できます。

  • コメント ボックス内に他のコメント ボックスをネストできます。

コメントの色

[Details] パネルには、コメント ボックスの色に関するプロパティがあります。

  1. メント ボックスの ヘッダ バー をクリックして、その [Details] パネルを表示します。

    Comment header bar

  2. [Comment Color (コメントの色)] の色見本をクリックして、[Color Picker (カラー ピッカー)] ダイアログで新しい色を選択します。

    Comment color picker

リルート ノード

リルート ノードは 2 つのマテリアル式ノードの間のワイヤーのパスを修正する方法を提供します。また、リルート ノードを使って、ワイヤーを分割し、複数の入力に接続することも可能です。

ワイヤーに沿った部分をダブルクリックして、リルート ノードを追加します。

Add wire reroute pin

ワイヤーのパスを修正するには、リルート ノード上にカーソルを乗せて、移動アイコンを表示させます。

Move cable reroute pin

ノードを左クリックして目的の位置にドラッグします。ワイヤーをリルートすることで、元のパス上にあったノード周辺のワイヤーがリダイレクトされます。

New cable path

この動画では、リルート ノードを使用してワイヤーを分割して 3 つのダウンストリーム入力にフィードします。

Named Reroute

Named Reroutes (名前付きリルート) 機能では、ワイヤーの接続を取り除き、代わりに入力と出力のノードを介して情報をルートすることで、マテリアル グラフを簡素化します。Named Reroute は、マテリアル グラフのある領域から別の領域へのトンネル、またはポータルと捉えることができます。

たとえば、ラフネス マップに関連する次の小さなノード グループからは、マテリアル グラフの中央を横切る長いワイヤーが引かれています。Named Reroute を使うことで、情報のフローに影響を与えずにワイヤーを取り除くことができます。

Unnecessary cable

Named Reroute を作成する

  1. ワイヤー部分をダブルクリックしてリルート ノードを追加します。

    Named reroute pin

  2. ノードを右クリックして、コンテキスト メニューから [Convert to Named Reroute (名前付きリルートに変換)] を選択します。

    Convert to named reroute

  3. ワイヤーの接続が取り除かれて、接続の最初と最後の部分に 2 つの Named Reroute ノードが作成されます。次の図では、名前付きリルートによってトンネルが形成されていることがわかります。データが最初のノードに入力されて、2 つ目の Named Reroute Usage ノード から出力されます。

    Named reroute nodes

リルートの最初のノードは Named Reroute Declaration と呼ばれるものです。このノードには、[Details] パネルで一意のわかりやすい名前を付けることが非常に重要です。

Reroute declaration description

Named Reroute Declaration ノードを選択して、[Name (名前)] フィールドにその説明を入力します。リルートの部分をカラーコード化する場合は、Node Color プロパティを変更します。

名前付きリルートの 出力ノード は、下流工程で複数の入力に渡したり、複製して複数回使用したりすることができます。

たとえば次のように、リルート ノードを使って Global UV Controls を下流行程にある 3 つの入力に渡します。

Triple reroute pin

このピンを名前付きリルートに変換すると、1 つではなく 3 つの Usage ノードがスポーンされます。

Three usage nodes

Global UV Controls コメント ボックス内のすべてのものが、機能面でノード ネットワークの残りの部分からデタッチされました。これをグラフ内の別の場所に移動しても、データは名前付きリルートを通じて AlbedoRoughnessBase Normal UV にそれぞれ渡されます。

Named reroute data flow

また、希望する場合は、単一の名前付きリルートの出力ノードを 3 つの UV 入力につなげることもできます。

Single usage three inputs

Named Reroute Usage ノードを追加する

右クリック メニューまたは [Palette (パレット)] から追加の Named Reroute Usage ノードを加えることができます。

マテリアルに含まれる名前付きリルートは、メニューの最上部に表示されます。また、既存のリルート ノードを選択して Ctrl+D キーを押し、これらを複製することもできます。

Named Reroutes in palette

通常のリルートに変換する

ケーブルの接続を表示したい場合は、名前付きリルートを名前なしのリルート ピンに変換することができます

Roughness Named Reroute が通常のリルート ピンに変換し直されています。

  1. Named Reroute Declaration または Usage ノード (のいずれか) を 右クリック します。

  2. メニューから [Convert to Reroute (リルートに変換)] を選択します。

    Convert back to reroute

  3. ワイヤーが復元されて、名前なしのリルート ピンが残ります。このピンが不要な場合は、それを選択して Delete キーを押します。

    Delete reroute pin

リルートの選択オプション

Named Reroute ノードには選択オプションがあり、これを使って、対応する Reroute ノードをマテリアル グラフ内で 検索して選択する ことができます。

Named Reroute Declaration ノードを右クリックして [Select Named Reroute Usages (名前付きリルート用途を選択)] をクリックし、そのリルートの下流工程にあるすべての出力ノードを選択します。

Select reroute usages

Named Reroute Usage ノードを右クリックして [Select Named Reroute Declaration (名前付きリルート宣言を選択)] をクリックし、そのリルートの上流工程にある原点ノードを選択します。

Select reroute declarations

整列と均等配置

メディア エディタの右クリック メニューには、マテリアル グラフ内のノードを整理整頓するためのオプションがいくつか用意されています。

  1. 整列させる複数のノードを選択します。

    Select multiple nodes

  2. 選択したノードの一つを 右クリック して [Alignment (アライメント)] サブメニューを開きます。

    Alignment options

  3. 選択したノードを整列または均等配置するためのオプションを一つ選びます。

    Nodes left-aligned

この例では、[Align Left (左に揃える)] を使って、選択したノードを左に揃えて整列させました。次に [Distribute Vertically (上下に整列)] を使って、ノード間の垂直方向のスペースを均等にしました。

整列

整列のメニューに含まれるオプションでは、ノードを 6 つの軸方向に揃えることができます。また、2 つのノード間の接続ワイヤーを水平方向にまっすぐに伸ばすことも可能です。

オプション

結果

ショートカット

Align Top (上に揃える)

選択したノードを上に揃えます。

Shift+W

Align Middle (真ん中に揃える)

選択したノードを垂直方向の真ん中に揃えます。

Alt+Shift+W

Align Bottom (下に揃える)

選択したノードを下に揃えます。

Shift+S

Align Left (左に揃える)

選択したノードを左に揃えます。

Shift+A

Align Center (中央に揃える)

選択したノードを水平方向の中央に揃えます。

Alt+Shift+S

Align Right (右に揃える)

選択したノードを右に揃えます。

Shift+D

Straighten Connection (ケーブルの真直化)

2 つのノード間のワイヤーを水平方向にまっすぐ伸ばします。

Q キー

配布

均等配置 のオプションでは、選択したノード間の水平方向または垂直方向のスペースを均等にします。

オプション

結果

Distribute Horizontally (左右に整列)

選択したノード間の水平方向のスペースを均等にします。

Distribute Vertically (上下に整列)

選択したノード間の垂直方向のスペースを均等にします。

折りたたみノード

Collapse Nodes (ノードの折りたたみ) オプションを使用すると、複数のマテリアル表現式や関数を単一のノードにまとめることができます。

これには次のような利点があります。

  • 関連するノードのグループが大規模になってより複雑になった場合に、これらを折りたたむことでグラフ内のスペースを確保し、マテリアルを読みやすくできる。

  • 繰り返し使用する共通のノード グループがあり、その機能や目的をすでに把握しており、完全なノード ネットワークを毎回表示する必要がない場合に、これらを折りたたむことで簡素化できる。

たとえば、次の図の Detail Normal Tiling ノードでは、テクスチャのスケールを制御する馴染み深い手法が使用されています。

Detail normal tiling

Detail Normal Tiling ボックス内のすべてを折りたたみ、グラフをシンプルにすることができます。

ノードの折りたたみ方法

  1. 折りたたむすべてのマテリアル ノードを選択しま

    Select node group

  2. .ノードの一つを 右クリック して、コンテキスト メニューから [Collapse Nodes] を選択します。

    Collapse nodes

  3. 選択した複数のマテリアル表現式が単一のノードに置き換わります。このノードのデフォルト名は「Collapsed Nodes」です。

    Nodes collapsed

  4. ノード上部にあるこの名前を 左クリック して、フィールド内にわかりやすい名前を入力します。

    Rename nodes

  5. グラフ内の「Detail Normals」セクションが大幅に簡素化されました。

    Detail normal simplified

折りたたんだノードを編集する

ノードを折りたたんでもマテリアル グラフ自体は変化しません。折りたたんだノードは、ノード ネットワークを含むコンテナとしてグラフ内で機能します。

折りたたんだノード上にマウス カーソルを合わせると、内部のマテリアル グラフをプレビューできます。

Hover preview

折りたたんだノードを ダブルクリック すると、同じマテリアル エディタのウィンドウ内にサブグラフが開きます。

マテリアル エディタ上部のブレッドクラム ナビゲーションにある「Material Graph」をクリックし、折りたたんだノードの表示を中止してメイン グラフに戻ります。

Return to graph

折りたたまれたノードを展開する

マテリアル グラフ内で折りたたまれているノードを展開して、元の表示に戻すことができます。

  1. 折りたたまれたノードを右クリックします。

  2. コンテキスト メニューの [Expand Node (ノードを展開)] をクリックします。

    Expand node

  3. 折りたたまれたノードが元の位置に復元されます。

    Nodes restored

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