1. Epic GamesDeveloper
  3. 最初のテクスチャ グラフを作成する

最初のテクスチャ グラフを作成する

テクスチャ グラフ エディタを使用して、UV チェッカー パターン テクスチャをプロシージャルに作成します。

最初のテクスチャ グラフを作成する
Learn to use this Experimental feature, but use caution when shipping with it.

SEO-Description：Unreal Engine でテクスチャをプロシージャルに作成し編集するためのテクスチャ グラフ ノードのリファレンス。 Type: Tutorial Parent: designing-visuals-rendering-and-graphics/textures/texture-graph-editor Primary-Owner: DN.Cherry Tags: surfacing Tags: materials Tags: Experimental Topic-image: topic.png Hero-image: hero.png Social-image: social.png Version: 5.5 Order: 1

テクスチャ グラフ エディタ は、Unreal Engine でテクスチャをプロシージャルに作成するためのノードベースのインターフェースです。このガイドでは、カスタム UV チェッカー パターンを生成するテクスチャ グラフの作成方法を説明します。

グラフによって、タイル、カラー、グリッドライン、矢印の数をカスタマイズできます。このグラフの作成により、テクスチャ グラフに関連するいくつかの主要概念とワークフローを探求できます。

最初のグラフを作成する前に、エディタと有用な一般概念の概要について「テクスチャ グラフの利用開始」ガイドを確認しておくと役立ちます。

プラグインをロードする

テクスチャ グラフ エディタは実験的機能プラグインであり、Unreal Engine を開始したときにデフォルトではロードされません。

プラグインを有効にするには、次の手順を実行します。

  1. メニュー バー で、[Edit (編集)] > [Plugins (プラグイン)] を選択します。
  2. 検索バーに、「texture graph」と入力します。
  3. TextureGraph プラグインを有効にし、ダイアログのポップアップで、[Yes (はい)] を選択します。
  4. エンジンを再起動します。

テクスチャ グラフ アセット

新しいテクスチャ グラフを作成するには、次の手順を実行します。

  1. [Content Drawer (コンテンツ ドロワー)] を開き、[Add (追加)] > [Texture (テクスチャ)] > [Texture Graph (テクスチャ グラフ)] をクリックします。
  2. 新しいアセットの名前を「TG_UVChecker」に変更します。
  3. アセットを保存してからダブルクリックし、エディタを開きます。

ベース チェッカー タイルを構築する

パターンのベースは繰り返し使用したり、編集したりすることができる 2 x 2 タイルです。

このガイドでは、パターンをゼロから構築し、ワークフローとユーザー制御を探求します。

すぐにチェッカー パターンが必要な場合は、いくつかの標準的なパターン タイプのオプションがある Pattern ノードを検討することができます。

チェッカー パターンの制作を始めるには、次の手順を実行します。

  1. ノード パレットから、[Procedural (プロシージャル)] セクションにアクセスし、Shape ノードをグラフにドラッグします。下向きの矢印をクリックしてノードを展開し、可能なすべてのオプションを表示します。
  2. [ShapeType (形状の種類)] を長方形に変更します。
  3. Output ピンをクリックし、ドラッグします。選択を解除すると、ノード パレットが開きます。リストから「Transform」を検索し、選択します。Shape ノードと Transform ノードは自動的に接続されます。
    1. この手法を使ってノードを作成する場合、1 番上の入力値に接続されることを忘れないでください。
  4. Transform ノードを展開し、[Coverage (カバレッジ)] を 0.5、0.5 に調整します。トランスフォームのカバレッジを調整すると、入力画像 (この場合は、単純な長方形) を指定された値に縮尺します。デフォルトでは、フィルカラーはカラーまたはアルファ値で空です。フィルカラーは詳細設定で設定できます。
  5. Shape ノードから 2 つ目の Transform ノードをドラッグします。2 つ目の Transform の [Coverage] を 0.5、0.5 に設定し、[Offset (オフセット)] を 0.5、0.5 に設定します。占有スペースを少なくするために Transform ノードを最小化します。
  6. グラフ ビューで右クリックし、[Math (数式)] までスクロールダウン、または検索してメニューから Add ノードを探します。

  7. Transform ノードの Output 値を Add ノードの入力 A と入力 B に接続します。単一の 4 マスのチェッカー タイルができます。

    Shape and Transform Nodes
  8. グラフを構築するとき、整理しておくことが重要です。すべてのノードを選択し、グラフを右クリックしてから [New Comment (新規コメント)] を選択します。コメント ボックスには 4 つのノードが含まれます。コメントに「CheckerBlock」と名前を付けます。
base checker block

分割線を作成する

基本のチェッカーブロックで、分割線を重ねて、太さとコーナーの半径値をコントロールできます。

分割線を追加するには、次の手順を実行します。

  1. Shape ノードを作成し、形状を矩形に設定して、幅と高さを「0.9」にセットします。
  2. Shape ノードの出力ピンをドラッグして、検索し、Transform を選択します。
  3. Transform ノードの Repeat 値を「2.0」、「2.0」に設定します。
  4. Output ピンをドラッグし、Invert を検索して選択します。このノードにより、対象のライン マスクに正しい値が得られます。

  5. Invert ノードで、Clamp を有効にします。

    Procedural Divided Lines
  6. 作成した線の基本構造で、線の太さとコーナー半径を調整するメカニズムを追加できます。グラフ内を右クリックし、Scalar を検索して選択します。
  7. このノードを右クリックして [Rename (名前変更)] を選択することで、ノードの名前を「Rounded Corners」に変更します。このノードを Shape ノードの Rounding ピンにつなげます。値を「0.25」に設定します。
  8. この手順を繰り返して、3 個のスカラー ノードを作成し、名前を「LineThickness」、「SquareBase」、「LineMult」に変更します。1.LineThickness ピンをドラッグして、検索し、リストから Multiply を選択します。
  9. LineMult の出力から Multiply ノードの B ピンにつなげ、値を「0.1」にセットします。
  10. SquareBase ピンをドラッグして、検索し、リストから Subtract を選択します。
  11. Multiply ノードの出力を Subtract ノードの B 値につなげます。
  12. Subtract の出力ピンを Shape ノードの Width および Height 値につなげます。
  13. すべてのノードを選択し、周りに新規コメント ボックスを作成して、グラフをわかりやすくします。
Rounded Corners

矢印を作成する

パターンの向きを示すために、それぞれの正方形の中心に矢印を追加できます。

この最終要素を追加するには、次の手順を実行します。

  1. グラフ内を右クリックし、Shape を検索して選択します。この手順を繰り返して、2 個の Shape ノードを作成します。
  2. 1 番目のノードの形状を Triangle に設定してから、幅を「0.6」にセットします。
  3. 出力ピンをドラッグし、Transform を検索して選択します。Offset 値を「0.0」、「0.05」に設定します。
  4. 2 番目の Shape ノードを Rectangle に設定してから、幅を「0.1」、高さを「0.4」にセットします。
  5. 出力ピンをドラッグし、Transform を検索して選択します。Offset 値を「0.0」、「0.8」に設定します。
  6. グラフ内を右クリックし、Add を検索して選択します。Transform ノードの出力ピンを Add ノードにつなげます。

  7. Add ノードを選択してから、プレビュー ウィンドウで、ロック アイコンをクリックします。このアイコンは、他のノードを選択したときでも、元のノードのプレビューをロックします。このロック プレビューにより、トランスフォーム値を編集し、最終結果を確認することができます。

    Procedural Arrow
  8. 単一の矢印形状を、作成した標準的な 4 個の正方タイルベースに変換します。実行するには、Add ノードの出力ピンからドラッグし、検索して Transform を選択します。
  9. Transform ノードの Repeat 値を「2.0」、「2.0」にセットします。
  10. 他のノードのプレビューを確認するために、プレビューのロックをオフにします。
  11. 矢印が若干大きすぎます。Zoom 値を「-0.1」に設定して、繰り返すそれぞれのタイルをスケーリングします。負の値では、ズームアウトし、結果として小さい矢印になります。
  12. ズームアウトすると、各タイル間の空の領域が増えます。[Details (詳細)] パネルで、[Fill Color (フィルカラー)] 値をクリックして、A (アルファ) 値に「1」をセットします。色はデフォルトでは黒にセットされています。これらの値を調整して、ソリッド マスクを作成します。
  13. すべてのノードを選択し、周りに新規コメント ボックスを作成して、グラフをわかりやすくします。

コンポーネントを結合し、色を追加する

スケーラブルなチェッカー パターンを作成するためのコア構成要素が完成しました。後からパターンを調整するためのグリッド ライン セクションと同様のコントロールをさらに追加できます。

  1. まず最も重要な要素であるチェッカー カラーから始めます。ノード パレットから 2 個の Color ノードをドラッグして、配置します。
  2. ノードの名前を「CheckerColorA」と「CheckerColorB」に変更します。
  3. [Details (詳細)] パネルで Color ノードを期待するチェッカー カラーに調整します。
  4. CheckerColorA の出力ピンからドラッグし、検索して Blend を選択します。Blend ノードは、複雑なブレンド処理向けの多くの機能がある強力な関数です。この例では、デフォルト設定を維持します。
  5. CheckerColorB の出力ピンを Blend ノードの Background 値にアタッチします。
  6. チェッカーブロックの Add ノードの出力ピンからドラッグして、新しい Transform ノードを作成します。
  7. 新規 Scalar ノードを作成し、名前を「CheckerRepeat」にします。
  8. CheckerRepeat 値を「2.0」にセットします。
  9. CheckerRepeat の出力ピンを新規作成した Transform ノードの Repeat ピンにつなげます。単一のスカラー入力が X と Y の繰り返し値に適用されます。

  10. Transform ノードの Output ピンを Blend ノードの Mask 値につなげます。

    Base Checker Color

グリッド ライン カラー

グリッド ラインでも同様のワークフローを繰り返すことができます。線の太さと丸いコーナーに対するコントロールをすでに作成しましたが、ライン カラーの設定はまだありません。

  1. 新しい Color ノードを作成して、名前を「LineColor」に変更します。
  2. [Details (詳細)] パネルで LineColor ノードを期待する色に調整します。
  3. LineColor ノードの出力ピンからドラッグして、検索し、Blend を選択します。
  4. 前に作成したチェッカー Blend ノードの出力ピンを新しい Blend ノードの Background 入力につなげます。
  5. GridLines コメント ボックスで、Invert ノードの出力ピンからドラッグして、検索し、Transform を選択します。
  6. CheckerRepeat ノードを新しい Transform ノードの Repeat 入力につなげます。出力ピンを複数回使用できます。
  7. Transform ノードの出力ピンを新しい Blend ノードの Mask 入力につなげます。
Grid Line Color

矢印のカラー

この処理を繰り返して、チェッカー パターンの上に矢印を追加します。

  1. Color ノードを作成し、名前を「ArrowColor」にします。
  2. [Details (詳細)] パネルで ArrowColor ノードを期待する色に調整します。
  3. ArrowColor ノードの出力ピンをドラッグして、検索し、Blend を選択します。
  4. 前に作成したチェッカー Blend ノードの出力ピンを新しい Blend ノードの Background 入力につなげます。
  5. Arrow コメント ボックスで、Transform ノードの出力ピンをドラッグして、検索し、Transform を選択します。
  6. CheckerRepeat ノードを新しい Transform ノードの Repeat 入力につなげます。
  7. Transform ノードの出力ピンを新しい Blend ノードの Mask 入力につなげます。
  8. Blend ノードの出力ピンをドラッグして、検索し、Output を選択します。Output ノードの名前を「BaseColorOutput」に変更します。
Arrow Color

出力およびエクスポート

Output ノードには、共通のテクスチャ属性、出力名、フォルダ パス、解像度の設定があります。

Color Output

複数の出力を単一のグラフに追加できます。このワークフローが便利なのは、カラー、ラフネス、法線、メタリック マップを必要とするマテリアル向けにさらに複雑なテクスチャ セットを作成するときです。

複数の出力タイプをセットアップするには、次の手順を実行します。

  1. GridLines コメント ボックスで、Transform ノードの出力ピンをドラッグして、検索し、BrightnessContrast を選択します。
  2. Brightness を「0.5」に調整し、さらに平板なグレースケール イメージを作成します。
  3. BrightnessContrast ノードの出力ピンをドラッグして、新しい Output ノードを作成します。ノードの名前を「RoughnessOutput」に変更します。
  4. 前に作成した Transform ノードの出力ピンをドラッグして、検索し、NormalFromHeightMap を選択します。
  5. NormalFromHeightMap ノードの出力ピンをドラッグして、新しい Output ノードを作成します。ノードの名前を「NormalOutput」に変更します。

  6. それぞれの出力ノードの出力名と圧縮設定を調整します。

    image alt text
  7. メインメニュー バーの [Export (エクスポート)] をクリックします。

エクスポート ウィンドウが開き、マップとして出力できる出力ノードが表示されます。必要に応じてこれらを選択または選択解除して、すべてのマップまたは一部でイテレートできます。ウィンドウで [Export (エクスポート)] をクリックして、新しいテクスチャ マップを作成します。

Texture Export Window

多様なテクスチャ ワークフローでテクスチャ グラフ エディタを使用して、既存テクスチャの基本的な編集、新しいテクスチャの作成、パッキング、アトラス処理、ブループリントとの統合を実行できます。パイプライン ユーティリティとしてテクスチャ グラフを使用して、共通の処理に利用できます。

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page