NiagaraでWidgetからパーティクルを生成

はじめまして。ゆうぶちです。

卒業制作で作った作品の技術紹介をしていこうと思います。

https://miraisozoten.com/hal_nagoya/works/257/

 

今回はタイトルの動きの作り方紹介です。

UE4Niagaraを使用しています。

ウィジェットがパーティクルになり、次のウィジェットを形成するといった表現です。

 

 

 

移動前と移動後のウィジェットをレンダーターゲットに焼き付ける

まず、レンダーターゲット2枚を作ります。

f:id:puuhikoriiyuun:20210116182604p:plain

レンダーターゲットの設定は下のようにします。

f:id:puuhikoriiyuun:20210116183434p:plain

ウィジェットも作ります。レンダーターゲットに焼き付けたときにパーティクルの移動先を決定するので中身は動きの少ないものにしてください。

f:id:puuhikoriiyuun:20210116184015p:plain

次にウィジェットを先ほど作ったレンダーターゲットに焼きます。かなり頑張ったのですが、ブループリントだけではウィジェットをレンダーターゲットに焼くことは無理みたいでした。

UnrealC++はほとんど触ったことがないので、今回はおかずさんのプラグインに頼りました。いつもお世話になっております。

github.com

このプラグインを入れるとDrawWidget to Targetというノードが使えるようになります。Targetに先ほど作ったレンダーターゲットを入れます。Color1,1,1,0でクリアしてからレンダーターゲットに焼き付けます。

f:id:puuhikoriiyuun:20210117034552p:plain

テクスチャからNiagaraを作る

この記事のメイン部分です。

既存のモジュールではテクチャから色情報を取り出すことしかできません。なので今回はテクスチャのアルファ値によってパーティクルを生成させるモジュールが必要となります。

では早速作っていきます。

Niagaraプラグインを追加するとNiagaraが使えます。

ナイアガラエミッタをEmptyで作成します。

f:id:puuhikoriiyuun:20210116222442p:plain

パラメータを二つTextureSampleで作ります。

f:id:puuhikoriiyuun:20210116221900p:plain

エミッタのプロパティとエミッタの更新はこんな感じ。 

GPUにすると早いはず…。

f:id:puuhikoriiyuun:20210117001359p:plainf:id:puuhikoriiyuun:20210117001447p:plain

エミッタの更新にSpawnBurstInstantaneousモジュールを追加しパーティクルをスポーンさせます。

f:id:puuhikoriiyuun:20210117001744p:plain

InitializeParticleはこんな感じ。サイズ小さくするくらい。

f:id:puuhikoriiyuun:20210117002518p:plain

次にスクリプトを作っていきます。まずFunctionScript。

f:id:puuhikoriiyuun:20210117003344p:plain

ここではテクスチャからパーティクルの位置、色を取得します。透明ならサンプリング失敗としてもう一度行います。

f:id:puuhikoriiyuun:20210117015307p:plain

f:id:puuhikoriiyuun:20210117015002p:plain

次にModuleScript。

f:id:puuhikoriiyuun:20210117015934p:plain

モジュールの入力はテクスチャのサイズとテクスチャ2つ。

パーティクル属性は出力値みたいなもので、パーティクル一つ一つに持たせることが出ます。移動前と移動後の位置と色のパラメータを作ります。LifeTimeはサンプリングに失敗したときに0にして即削除します。

f:id:puuhikoriiyuun:20210117024751p:plain

先ほど作ったFunctionScriptを使用します。ここが本当に汚くて申し訳ないのですが、無理やりサンプリング回数を増やしています。サンプリング回数を増やす理由は、移動前と移動後のサンプリングに成功したときのみパーティクルを存続させるので、アルファ部分が多いテクスチャだと両方成功する確率が低く、パーティクルが発生しなくなってしまうからです。ループが使えればいいんですけどないんです。下の処理をテクスチャ2枚分行います。

f:id:puuhikoriiyuun:20210117025200p:plain

それぞれStartとEndに結果を入れます。両方のサンプリングに成功したらLifeTimeに1を入れます。そうでなければ即削除です。

f:id:puuhikoriiyuun:20210117021358p:plain

全体はこんな感じ。汚くてすみません。

f:id:puuhikoriiyuun:20210117025223p:plain

これでスポーン時のモジュールが完成です。

次はアップデート時のモジュールです。先ほどの要領でModuleScriptを作ってください。

パラメータはこんな感じ。

f:id:puuhikoriiyuun:20210117025628p:plain

内容はLerpで補間してパーティクルの座標と色を更新しています。

f:id:puuhikoriiyuun:20210117025853p:plain

これでモジュールの作成は終わりです。それぞれ追加して値を設定します。アップデートの補間はカーブで行っています。

f:id:puuhikoriiyuun:20210117030938p:plain

エミッタが完成したので次はナイアガラシステムです。エミッタだけでは動きません。エミッタをナイアガラシステムに加えることで動きます。今回はエミッタが一つだけですが、このエミッタの組み合わせで様々なエフェクトが作れます。その組み合わせを作るのがナイアガラシステムです。

f:id:puuhikoriiyuun:20210117031416p:plainf:id:puuhikoriiyuun:20210117041225p:plain

”選択したエミッタに基づく新しいシステム”を選択し、先ほど作ったエミッタを追加します。

以上でNiagaraは終了です。 

Niagara用アクタと映すためのカメラを作る

Niagaraは3D空間にパーティクルを生成するので2Dにしなければなりません。

Niagaraのみを移すシーンキャプチャカメラを配置します。何も映らないくらい遠い場所に配置してください。シーンキャプチャカメラとは映しているものをレンダーターゲットに焼き付けてくれるカメラです。また新しくレンダーターゲットを生成して、シーンキャプチャカメラのTextureTargetに入れます。

f:id:puuhikoriiyuun:20210116190409p:plain

新しいアクターを作成。

f:id:puuhikoriiyuun:20210116193505p:plain

コンポーネントに先ほど作ったNiagaraを入れます。Niagaraのパラメータに移動前と後のレンダーターゲットを入れます。

このアクターをシーンキャプチャカメラにアタッチすることでNiagaraのみのレンダーターゲットテクスチャを作り出してくれます。

 レンダーターゲットテクスチャぴったりになるようにNiagaraの位置を調整します。これは頑張って微調整してください。

f:id:puuhikoriiyuun:20210116190717p:plain

ここで作ったレンダーターゲットテクスチャをWidgetに張り付けて画面に表示させます。ただテクスチャをそのまま表示するとこんなことになってしまいます↓

f:id:puuhikoriiyuun:20210117033259p:plain

マテリアルを作る必要があります。アルファ値のみ反転すると正常動作します。いまいち理解していませんが、マスク画像を作っている?分かる方教えてほしいです。

f:id:puuhikoriiyuun:20210117033429p:plain

このマテリアルをWidgetに張り付けて画面に表示させればうまく動いてくれます。


WidgetNiagaraを切り替えて表示する

あとはレベルブループリントにて表示を切り替えるだけです。ウィジェットは表示はせずにCreateWidgetのみしておいてください。

Niagaraを生成してくれる関数を作ります。ウィジェットを渡すことでレンダーターゲットテクスチャを作りNiagaraをカメラにアタッチさせるようにします。f:id:puuhikoriiyuun:20210117034624p:plain

今表示しているウィジェットをRemoveした後、上の関数に事前に生成しておいたウィジェットを渡してNiagaraを生成します。一秒後にNiagaraのアクタを削除しパーティクル移動後のウィジェットを表示すれば完成です。

f:id:puuhikoriiyuun:20210117035455p:plain

 

まとめ

最後までご覧いただきありがとうございます。

Niagaraのモジュールの勉強から始めて丸2日かけて作りましたが、初めてNiagaraを触ったにしてはよくできたと自負しています。