アルゴンUE4/UE5&アプリ開発日記

UE4/UE5の機能やプラグインを紹介します。初心者や中級者向けになってます!!

【UE4/UE5】FulidNinjaを触ってみよう(基礎編)

FulidNinjaを触る(*'ω'*)

今回はFulidNinjaが今月無料で配布されたので、

実際に触ってパラメーターの設定やNiagaraの使用方法を書きます。

こちらで7月中は無料で配布されています。

ビデオチュートリアルも多くあるのでこちらを参考にしてます。

FluidNinja VFX Tools 1.0 - Demo - Smoke Fire Particles [UE4] - YouTube

※UE5.0.2で説明していますがUE4でも同様のことが可能かと思います。

※説明の誤りや不明瞭な説明も多々あるかもしれませんがご了承ください・・・

FluidNinjaって何?

FluidNinjaとは炎や煙などの流体の動きをテクスチャに焼き付けて、

テクスチャやマテリアルなどで書き出せるマーケットプレイスで購入できる、

視覚表現を生成するためのツールになります。

リアルな煙の表現を作りたかったり炎の動きを作りたいと思った時にとても便利です。

またレイマーチングやNiagaraの連携もありますので、

そちらもこれから紹介できる範囲で紹介していきます。

・目次に戻る

ツールの種類について

まずはFulidNinjaプロジェクトを作成する必要があります。

「FluidNinja」とマイダウンロードで検索すると出てくるので、

そちらからプロジェクトを作成して起動します。

FluidNinjaツールの作成

プレイを押すと各種マテリアルやテクスチャなどのツール画面が、

起動するようになっています。

ツールとしての機能も多種多様で一番上のコンボボックスから、

各種用途のツールを選択することが可能です。

ツールとしては3つ用意されているので紹介していきます。

FluidNinjaの起動画面

まずはFluidNinjaになります。

こちらでは様々なパターンの流体用のテクスチャやマテリアル、

PNGでの画像を出力することが可能になります。

FluidNinjaの編集画面

続いてNinjaFieldsになります。

こちらは流体の速度情報をDataTable上で出力することが可能です。

他に別のプラグインFGAファイルとしてVECTORFIELDファイルとして出力できます。

Easy File System (Blueprint Library):コードプラグイン - UE マーケットプレイス

プラグインが無い方はCSVで出力して使用する形になります。

※上記プラグインは有料ですのでご注意ください。

NinjaField

最後にNinjaFlowですが、
こちらは流れる動きを表現するマテリアルを作成するためのものになります。

水の流れなど流動的なうねりをテクスチャで表現を作成します。

NinjaFlowの画面

これら三つの機能を活用して思い描いたエフェクトを作ってみましょう!

・目次に戻る

FluidNinjaのパラメータ説明

実際にエフェクトを作る前に各ツールのパラメータを説明します。

<全ツール共通>

一番上の設定の説明

①ツールを選択するコンボボックス

②各種テンプレートが用意されているコンボボックス

③設定を変更した②のテンプレート情報を保存するためのボタン

④②で選択したテンプレートを複製するためのボタンになります。

 個人のテンプレートを作る場合は最初に複製してからが良いです。

⑤テンプレートを削除するためのボタンです。

 すでに存在するテンプレートを削除すると復元が大変なので、

 必ずテンプレートを複製してから削除することがおすすめです。

<FluidNinja/Canvasの設定>

FluidNinja/Canvas設定

①画面表示切替用のボタンになります。

 左は出力結果のエフェクトが表示される1画面・右は4画面になります。

②出力されるテクスチャのサイズになります。

 一つ一つのエフェクトサイズになるので注意

③各数値の設定になります。

 Offset:エフェクトを表示する位置の間隔になります。
    Scale:表示されるエフェクトの大きさになります。
     数値を上げると左上に縮小されます。
    Rotation:エフェクトの角度を調整します。

④TilingはScaleで縮小したものを並べて表示させる設定になります。

<FluidNinja/Bakeの設定>

FluidNinja/Bakeの設定

①▷ → エフェクトの動きを再生するボタン
 ■ → エフェクトの動きを停止するボタン
  → エフェクトの動きを元に出力するエフェクト画像の録画

②FrameRange → 出力するエフェクトの動きの分割数
                             数値が高いほど枚数が多くなる。
   Prefix → 出力されるファイルの名前(こちらはテキスト入力)

③Rec. every frame → 記録するフレーム速度 2-5辺りがスムーズ。

 Loopback frames → 生成するエフェクトの逆の動きのフレーム数

 Rec.mode atlas → OFFの場合動きを一枚一枚画像ファイルとして出力する

 Rec.mode masked → 超スローモーションの際流れを滑らかにするために使用。

<FluidNinja/Velocityの設定>

FluidNinja/Velocityの設定

OffsetX・OffsetY → 流体を縦横に流したい方向を+-の数値で指定

Amplify → OffsetX・OffsetYに指定した方向に流れる速度

Rotation → 0~1の値で回転させる。

Turbulence → 流れをどれぐらいブレさせるか

Noise → 流れの中にノイズを出力する(0~1で1にすると完全に無くなる)

<FluidNinja/Densityの設定>

FluidNinja/Density

InputWeight → 流体の出力量(0~1で数値が高いと表示が多くなる)

OutWeight → 流体の流れの速さ(0~1で数値が高いと流れが遅くなる)

Shading → 輪郭のみを表現したい場合に設定したりする数値

Contrast → コントラスト(0がデフォルト値)

Hue → 濃度の色のデータを渡す(0→白黒 0.2→緑 0.5→青 1.0→赤)

Curl → ノイズ処理(数値が高いほどノイズのような流体のマテリアルになる)

CurlScale → 流体の流れの大きさを指定(-0.95~4まで指定可能)

Sharpen → 流体の動きにぼやけた表現の強さを指定

<FluidNinja/Inputの設定>

FluidNinja/Inputの設定

①流体エフェクトの大元となるエフェクト用画像の設定になります。

 コンボボックスで設定されているエフェクト用画像を指定して、

 Scaleは大きさOffsetは表示する位置になります。

②流体の流れをどこに表示するか指定する画像の設定になります。

 Defaultのテンプレートで指定することが多いです。

 下の方のBrushというのはOutput領域でマウスポインタ上から、

 テストで煙を出すための設定になります。

③流体の流れを指定する画像の設定になります。

 こちらもDefaultのテンプレートで設定することが多いです。

FluidNinja/ExportFGAの設定

ExportFGAはEasyFileSystemというプラグイン用のエクスポートです。

有料なのでこちらを購入している方はこちらで出力して、

流体の情報を活用することが可能です。

・目次に戻る

テクスチャやマテリアルを作ってみる

その前にUE5のみの対応になりますがコンボボックスの選択文字列が、

黒くてだいぶ見えずらいので改善します。

BP_NinjaGUIというウィジェットブループリントがFluidNinjaフォルダ内にあります。

階層タブからcomboと検索して検索結果の対象になっている箇所の、

TextColorとSelectedTextColorを白くしましょう。

これでコンボボックスの選択してある文字とリストが白くなり見やすくなります。

FluidNinjaの設定のカスタマイズ

ウィジェットの設定を変更したら、

Pryo3_Flameというテンプレートを使ってリアルな炎を作ってみます。

◎Bake関連の値

FrameRange 16.0 Rec.Every 5 Loopback 16

CanvasとBakeの設定値

◎Velocity関連の値
OffsetX → 0.0 OffsetY → -0,7 Amplify → 20.87 Turblence → 0,.8
Rotation → 0.0 Noise → 0.3 

Velocityの設定値

◎Density関連の値

InputWeight → 0.11 OutWeight → 0.8 Shading → 0.0

Contrast → 0.05 Hue → 0.0 Curl → 200.0

Sharpen → 0.0 CurlScale → 0.0

Densityの設定値

完成図した際は以下のようなエフェクトの表現になっていると思います。

キャプチャ前の設定後の画像

設定が完了したらテンプレートの複製を行っておきましょう。

※テンプレートはデータテーブル形式で保存されます。
 FluidNinja > Input > FluidPresetsフォルダ内にFluidNinjaの、
 プリセットが保存されている仕組みとなっております。
※プロジェクトを閉じるとの消えてしまうので注意してください。

テンプレートの作成

プリセットとして保存し終わったらBake領域にある〇(①の箇所)を押して、

出力する設定に入ります。

その後②の領域でPlayback Speed(エフェクトの流れる速度)と、

FrameBlendingをそのままにして③の箇所の保存ボタンで出力します。

今回はMATERIALSを使用するので真ん中の保存ボタン二つを押します。

※左側の保存が背景が透明化されていて、右側は透明化されていません。

ほしい動きのMaterialの出力

保存ボタンを押すとContents > FluidNinja > Outputフォルダに出力されます。

※出力されるのはエフェクト用の画像2つとマテリアル2つの合計4つのファイルです。

出力されるデータ

今回は3767_AdvancedPlayerの方のマテリアルを開いて、

実際に炎の表現を作成していきたいと思います。

※実際に開いてみても白黒の煙が出てるだけなので設定が必要になります。

マテリアル設定画面

実際に設定を変更する流れを動画にしてみました。

細かい説明をすると以下のように設定しています。

Color1の値を赤200/緑0/青0に設定して、

Color2の値を赤1/緑1/青0に設定します。

最後にContrastの値を2程度に設定すれば炎のエフェクトが完成します(*‘ω‘ *)!

以上が簡単なエフェクトの作成方法になります。

Contents > FluidNinja >Usecase フォルダにサンプルがいろいろ入ってます。

AnimTexturesAndMaterialsがFluidNinjaで作成したサンプルが多く入ってます。

こちらもぜひ確認してみてください!

FluidNinjaのサンプルコンテンツ

・目次に戻る

その他連携について

今回はFluidNinjaの説明がほとんどでNinjaFieldsやNinjaFlowなど、

エフェクト作成時に活用できそうなものの説明ができてなかったので、

応用編で説明していけたらしていこうと思います。

予定ではNiagaraのエフェクトとVolumeFogあたりを作れたらなと思います。