NiagaraでWidgetからパーティクルを生成
はじめまして。ゆうぶちです。
卒業制作で作った作品の技術紹介をしていこうと思います。
https://miraisozoten.com/hal_nagoya/works/257/
今回はタイトルの動きの作り方紹介です。
ウィジェットがパーティクルになり、次のウィジェットを形成するといった表現です。
初めてNiagaraを使いました。よくできたタイトルになったと思います。頑張りました。ほめてください。#UE4 #Niagara pic.twitter.com/02BRr6iohd
— 水谷優(ゆうぶち) (@mizutani_yuu) 2021年1月18日
- 移動前と移動後のウィジェットをレンダーターゲットに焼き付ける
- テクスチャからNiagaraを作る
- Niagara用アクタと映すためのカメラを作る
- WidgetとNiagaraを切り替えて表示する
- まとめ
移動前と移動後のウィジェットをレンダーターゲットに焼き付ける
まず、レンダーターゲット2枚を作ります。
レンダーターゲットの設定は下のようにします。
ウィジェットも作ります。レンダーターゲットに焼き付けたときにパーティクルの移動先を決定するので中身は動きの少ないものにしてください。
次にウィジェットを先ほど作ったレンダーターゲットに焼きます。かなり頑張ったのですが、ブループリントだけではウィジェットをレンダーターゲットに焼くことは無理みたいでした。
UnrealC++はほとんど触ったことがないので、今回はおかずさんのプラグインに頼りました。いつもお世話になっております。
このプラグインを入れるとDrawWidget to Targetというノードが使えるようになります。Targetに先ほど作ったレンダーターゲットを入れます。Color1,1,1,0でクリアしてからレンダーターゲットに焼き付けます。
テクスチャからNiagaraを作る
この記事のメイン部分です。
既存のモジュールではテクチャから色情報を取り出すことしかできません。なので今回はテクスチャのアルファ値によってパーティクルを生成させるモジュールが必要となります。
では早速作っていきます。
Niagaraのプラグインを追加するとNiagaraが使えます。
ナイアガラエミッタをEmptyで作成します。
パラメータを二つTextureSampleで作ります。
エミッタのプロパティとエミッタの更新はこんな感じ。
GPUにすると早いはず…。
エミッタの更新にSpawnBurstInstantaneousモジュールを追加しパーティクルをスポーンさせます。
InitializeParticleはこんな感じ。サイズ小さくするくらい。
次にスクリプトを作っていきます。まずFunctionScript。
ここではテクスチャからパーティクルの位置、色を取得します。透明ならサンプリング失敗としてもう一度行います。
次にModuleScript。
モジュールの入力はテクスチャのサイズとテクスチャ2つ。
パーティクル属性は出力値みたいなもので、パーティクル一つ一つに持たせることが出ます。移動前と移動後の位置と色のパラメータを作ります。LifeTimeはサンプリングに失敗したときに0にして即削除します。
先ほど作ったFunctionScriptを使用します。ここが本当に汚くて申し訳ないのですが、無理やりサンプリング回数を増やしています。サンプリング回数を増やす理由は、移動前と移動後のサンプリングに成功したときのみパーティクルを存続させるので、アルファ部分が多いテクスチャだと両方成功する確率が低く、パーティクルが発生しなくなってしまうからです。ループが使えればいいんですけどないんです。下の処理をテクスチャ2枚分行います。
それぞれStartとEndに結果を入れます。両方のサンプリングに成功したらLifeTimeに1を入れます。そうでなければ即削除です。
全体はこんな感じ。汚くてすみません。
これでスポーン時のモジュールが完成です。
次はアップデート時のモジュールです。先ほどの要領でModuleScriptを作ってください。
パラメータはこんな感じ。
内容はLerpで補間してパーティクルの座標と色を更新しています。
これでモジュールの作成は終わりです。それぞれ追加して値を設定します。アップデートの補間はカーブで行っています。
エミッタが完成したので次はナイアガラシステムです。エミッタだけでは動きません。エミッタをナイアガラシステムに加えることで動きます。今回はエミッタが一つだけですが、このエミッタの組み合わせで様々なエフェクトが作れます。その組み合わせを作るのがナイアガラシステムです。
”選択したエミッタに基づく新しいシステム”を選択し、先ほど作ったエミッタを追加します。
以上でNiagaraは終了です。
Niagara用アクタと映すためのカメラを作る
Niagaraは3D空間にパーティクルを生成するので2Dにしなければなりません。
Niagaraのみを移すシーンキャプチャカメラを配置します。何も映らないくらい遠い場所に配置してください。シーンキャプチャカメラとは映しているものをレンダーターゲットに焼き付けてくれるカメラです。また新しくレンダーターゲットを生成して、シーンキャプチャカメラのTextureTargetに入れます。
新しいアクターを作成。
コンポーネントに先ほど作ったNiagaraを入れます。Niagaraのパラメータに移動前と後のレンダーターゲットを入れます。
このアクターをシーンキャプチャカメラにアタッチすることでNiagaraのみのレンダーターゲットテクスチャを作り出してくれます。
レンダーターゲットテクスチャぴったりになるようにNiagaraの位置を調整します。これは頑張って微調整してください。
ここで作ったレンダーターゲットテクスチャをWidgetに張り付けて画面に表示させます。ただテクスチャをそのまま表示するとこんなことになってしまいます↓
マテリアルを作る必要があります。アルファ値のみ反転すると正常動作します。いまいち理解していませんが、マスク画像を作っている?分かる方教えてほしいです。
このマテリアルをWidgetに張り付けて画面に表示させればうまく動いてくれます。
WidgetとNiagaraを切り替えて表示する
あとはレベルブループリントにて表示を切り替えるだけです。ウィジェットは表示はせずにCreateWidgetのみしておいてください。
Niagaraを生成してくれる関数を作ります。ウィジェットを渡すことでレンダーターゲットテクスチャを作りNiagaraをカメラにアタッチさせるようにします。
今表示しているウィジェットをRemoveした後、上の関数に事前に生成しておいたウィジェットを渡してNiagaraを生成します。一秒後にNiagaraのアクタを削除しパーティクル移動後のウィジェットを表示すれば完成です。
まとめ
最後までご覧いただきありがとうございます。
Niagaraのモジュールの勉強から始めて丸2日かけて作りましたが、初めてNiagaraを触ったにしてはよくできたと自負しています。