Niagara フリップブック ベイカーのクイック スタート ガイド

Niagara システム では、視覚的に優れたエフェクトが生成されます。ただし、シミュレーションを設計する際には、見栄えとパフォーマンスのバランスを取ることが重要です。優れたエフェクトを作成しても、場合によっては、ターゲット デバイスでそのエフェクトを使用すると大量のメモリを消費してしまうことがあります。

この場合の解決策のひとつが、Niagara シミュレーションを フリップブック にベイクすることです。これにより、タイリングされた画像が作成されます。この画像は、任意のマテリアルにロードすることができます。

たとえば、3D 流体エフェクトを作成したいものの、ターゲット プラットフォームでリアルタイムに実行することができないとします。そこで、3D 液体エフェクトを作成した後、ベイカー を使用してフリップブックにこのエフェクトをベイクし、これを 2D スプライト エミッタに戻して適用することができます。この方法では、ゲームや、バックグラウンドでより遠くにある可能性のある非ヒーロー エフェクトで、きわめて効率性の高いパフォーマンスを実現することができます。

目標

このチュートリアルでは、Niagara ベイカーを使用してシミュレーションからフリップブックをエクスポートします。

目的

• フリップブックのキャプチャを設定する

• キャプチャを実行する

• 新しいエミッタにフリップブックを接続する

キャプチャを設定する

1. Niagara エディタ で既存の Niagara システムを開きます。この例では、Grid 3D Gas Colored Smoke サンプルを使用しますが、どの Niagara システムでも使用することができます。Grid 3D Gas Colored Smoke を使用するには、[Content Drawer (コンテンツ ドロワー)] で右クリックして、[Create Basic Asset (基本アセットを作成)] > [Niagara System] を選択します。

   画像をクリックするとフルサイズで表示されます。

2. 「Niagara Fluids」テンプレートからフリップブックを作成します。これらのテンプレートは、Niagara Fluids プラグインが有効になっていると使用できます。ただし、フリップブックはどの Niagara システムからでも作成できます。[New system from a template or behavior example (テンプレートまたは動作例に基づく新しいシステム)]、[Grid 3D Gas Colored Smoke ] の順に選択します。

   画像をクリックするとフルサイズで表示されます。

3. メイン ツールバー に、[Baker (ベイカー)] という新しいボタンが追加されています。[Open Baker Tab (ベイカー タブを開く)] を選択すると、[Baker] パネル が表示されます。

   画像をクリックするとフルサイズで表示されます。

ユーザー インターフェースを操作する

[Baker] パネルのユーザー インターフェースは、以下で構成されています。

画像をクリックするとフルサイズで表示されます。

1. ベイク ボタン

2. Niagara プレビュー

3. フリップブック プレビュー

4. 再生ツールバー

5. フリップブック オプション

Niagara のプレビューをフレーミングする

まず、Niagara プレビュー ウィンドウ内でシミュレーションのフレーミングする必要があります。シミュレーションを一連の平らな 2D フレームにベイクするため、目的の角度とサイズを必ず設定してください。

フレーミングを調整するには、Niagara プレビュー ウィンドウ内で直接クリックしてドラッグします。

• 周回させるには、左クリックしてドラッグします。

• パンするには、マウスの中央のボタンをクリして、

• ズームするには、右クリックしてドラッグします。

• フレームをシステムの原点にセンタリングするには、F キーをクリックします。

また、[Camera (カメラ)] 設定で数値で入力することもできます。必要に応じて、[Camera Viewport Mode (カメラ ビューポート モード)] を任意に選択して、対応するフィールドの数値を編集します。

画像をクリックするとフルサイズで表示されます。

タイミングを調整する

[Playback Toolbar (再生ツールバー)] を使用して、シミュレーションの再生、一時停止、ステップ送り、ステップ戻しを実行し、ベイクされる内容をプレビューすることができます。

画像をクリックするとフルサイズで表示されます。

また、[Timeline (タイムライン)] 設定でタイミングを調整することで、シミュレーションの一部分のみをベイクすることもできます。たとえば、[Start Seconds (開始時間 (秒))] を調整すると、シミュレーション再生の途中からフリップブックが開始されます。[Duration Seconds (持続時間 (秒)] を調整すると、終了するタイミングを変更できます。

[Frames Per Second (毎秒ごとのフレーム数)] を設定して、コンポーネントのティック レートを調整します。通常、この値を調整する必要はありません。オーサリングするコンテンツと同じ値に設定します。Niagara システム エディタのデフォルトは 30fps です。この値の設定を小さくしすぎると、同じフリップブックのフレームが何度もレンダリングされることになります。たとえば、30 フレームをキャプチャして 1 秒かけてフリップブックをレンダリングする場合、[Frames Per Second (1 秒あたりのフレーム数)] を「20」に設定すると、30 フレームではなく、一意の 20 フレームしか記録されません。

テクスチャ サイズを調整する

フリップブックをベイクする方法では、各タイルがフリップブックのフレームを表すタイリングされた画像がエクスポートされます。テクスチャにマッピングするタイルの数と、テクスチャの総サイズを設定する必要があります。デフォルトでは、テクスチャは X 軸に 8 タイル、Y 軸に 8 タイル、テクスチャの合計サイズは 1024 × 1024 ピクセルで設定されます。

画像をクリックするとフルサイズで表示されます。

つまり、各タイルは 128 × 128 ピクセルのサイズになります。これらの値は [Texture (テクスチャ)] 設定で調整できます。

画像をクリックするとフルサイズで表示されます。

[Frames Per Dimension (寸法あたりのフレーム数)] を調整して、タイルの数を設定します。[Texture Size (テクスチャ サイズ)] を変更することで、テクスチャ全体のサイズを調整します。

ベイカーは、最終的な解像度に合うようにタイルをスケーリングするわけではありません。理想的な結果を得るには、タイルの数が全体のテクスチャ サイズに均等に分割されるようにします。

たとえば、[Frames Per Dimension] を 10 × 10 に設定し、[Texture Size (テクスチャ サイズ)] を 1024 × 1024 にした場合、システムは 10 個のタイルを 1024 個にマッピングしようとします。ただし、その場合、各タイルの幅は 102.4 ピクセルになりますが、システムでは部分的なピクセルを考慮することができません。そのため、各タイルを 102 のサイズにマッピングし、テクスチャの右と下に 4 ピクセルのパディングが追加されることになります。

これは、サブ UV マッピングがわずかにずれる原因となり、アトラスの再生中にジッターが生じる原因となります。最適な動作のためには、[Texture Size] を2 の累乗に設定し、[Frames Per Dimension] をそのテクスチャ サイズを均等に分割する数値にします。

その他のテクスチャのプロパティを設定する

デフォルトでは、[Source Binding (ソース バインディング)] が [None (なし)] に設定されている場合、ベイカーは SceneColorHDR 値を出力します。通常、これは望ましい結果です。ただし、使用可能なすべての GBuffer とパーティクル属性が使用可能であるため、[Source Binding] ドロップダウン メニューからどの項目も選択することができます。

画像をクリックするとフルサイズで表示されます。

最初のフリップブックを生成する前に、[Generated Texture (生成されたテクスチャ)] は [None] に設定されています。最初のキャプチャを実行した後、これは作成した新しいテクスチャに置き換えられます。

キャプチャを実行する

これで、正しいフレーミングとタイミングで、思い通りに見えるようにテクスチャを設定できたので、キャプチャを実行することができます。

1. Niagara プレビュー ウィンドウから、[Bake (ベイク)] をクリックします。

   画像をクリックするとフルサイズで表示されます。

2. システムがフリップブックをレンダリングしている間、プログレス バーが表示されます。完了すると、ダイアログが開き、テクスチャ ファイルに名前を付けることができます。

   画像をクリックするとフルサイズで表示されます。

3. レンダリングが完了すると、新しいテクスチャが [Baker] ウィンドウの [Texture (テクスチャ)] 設定でアクティブなテクスチャに置き換わります。

   画像をクリックするとフルサイズで表示されます。

   [Generated Texture] でこのテクスチャを選択した状態で、別のキャプチャを生成すると、このテクスチャが上書きされます。

4. テクスチャの新しいバリエーションを生成したい場合は、[Generated Texture] のドロップダウンをクリックし、[Clear (クリア)] を選択します。その後、任意の設定を調整し、新しいテクスチャを作成することができます。

   画像をクリックするとフルサイズで表示されます。

これでテクスチャがエクスポートされ、新しいエミッタに追加することができます。また、フリップブック テクスチャの外観の最終的なプレビューを見ることができます。

エミッタでフリップブック テクスチャを使用する

エミッタでフリップブックを使用するには、スプライト レンダラ を使用する必要があります。

1. これを設定するには、[Content Drawer (コンテンツ ドロワー)] を右クリックして、新しい Niagara システム を作成します。

2. [New system from selected emitter(s) (選択したエミッタに基づく新しいシステム)]、[Simple Sprite Burst (シンプル スプライト バースト)] の順に選択します。

3. プラス (+) ボタンをクリックして、エミッタを追加し、[Finish (完了)] をクリックします。

画像をクリックするとフルサイズで表示されます。

サブ UV アニメーションを追加する

フリップブックを追加するには、Particle Update グループに新しいモジュールを追加して、スプライト レンダラで複数のパラメータを調整する必要があります。

1. まず、[Particle Update (パーティクルの更新)] の横の プラス (+) ボタンをクリックして、Sub UVAnimation を選択します。これにより、モジュールがスタックに追加されます。

   画像をクリックするとフルサイズで表示されます。

2. モジュールのプロパティで、start frame と end frame を、アニメーションのフレーム数に合わせて調整します。この例では、8 × 8 フレームで、合計 64 フレームでした。フレームは 0 フレームから始まるので、設定は 0 と 63 のままにしておきます。

   画像をクリックするとフルサイズで表示されます。

スプライト レンダラの設定を調整する

1. プロパティを調整するには、[Sprite Renderer (スプライト レンダラ)] を選択します。[Sub UV (サブ UV)] セクションで、[Sub Image Size (サブ画像サイズ)] で、グリッドのタイル数を指定します。この例では、8 x 8 のままにしておきます。

   画像をクリックするとフルサイズで表示されます。

2. 次に、Sub UV テクスチャをリンクさせるための新しいマテリアルを作成し、スプライト レンダラに追加する必要があります。[Material (マテリアル)] の横にあるドロップダウン メニューをクリックし、[Create New Asset (新規アセットを作成)] > [Material (マテリアル)] を選択します。

   画像をクリックするとフルサイズで表示されます。

3. ダイアログボックスが表示されます。マテリアルに名前を付けて、保存する場所を選択します。

   画像をクリックするとフルサイズで表示されます。

4. コンテンツ ブラウザ で、マテリアル をダブルクリックし、マテリアル エディタ で開きます。[Details (詳細)] パネルで、[Blend Mode (ブレンド モード)] を [Translucent (半透明)] に設定します。

   画像をクリックするとフルサイズで表示されます。

5. マテリアル エディタ で、右クリックし「texture sample」を検索して、TextureSample ノードを追加します。

   画像をクリックするとフルサイズで表示されます。

6. TextureSample ノード を選択します。[Details (詳細)] パネルで、[Texture] をフリップブック ベイカーから保存したものに設定します。

   画像をクリックするとフルサイズで表示されます。

   デフォルトでは、カラー チャンネルに黒が事前に乗算されます。スプライトの周りに黒い縁取りができないように、Divide ノードを使用すると RGB チャンネルからこれを取り除くことができます。

7. 右クリックして、Divide ノードを追加します。

8. TextureSample ノードの RGB 値を Divide ノードの A ピンに接続し、TextureSample 値のアルファ A を Divide ノードの B ピンに接続します。

9. Divide ノードの出力を Emissive Color に接続します。

10. 最後に、TextureSample のアルファ値 A を、マテリアルの Opacity に接続します。

    画像をクリックするとフルサイズで表示されます。

最終結果

これで、スプライト レンダラでマテリアルが正しく設定されたので、Niagara エディタで Niagara システムを開きます。これで、レンダリングしたフリップブックがプレビュー ウィンドウで再生されているのを確認できます。