【UE4 .26】Niagaraでサイバー風のパーティクルを作る方法
サイバーチックなカウントアップするUIをパーティクルで作りました！ 気に入ってもらえたらRTしてもらったら作成方法のまとめ記事とか書くモチベになります💪
— 東京高速戦術@VRゲーム制作 (@kousoku_tactics) June 10, 2021
#UE4 #Niagara #gamefx #realtimevfx #3dcg #gamedev pic.twitter.com/i0DStm7GXy
これを作ります。
・角度の範囲を指定してマテリアルを減算する
UE4小ネタ ： 円形ゲージの作り方 - ぼっちプログラマのメモ
・平面のメッシュをパーティクルにする
【UE4】4.25でNiagaraを使って魔法陣エフェクトを作ってみよう - アルゴンUE4＆アプリ開発日記
・メッシュパーティクルの回転
今回作るパーティクルですが、Niagaraの方でやることはほぼないです。マテリアルで円を書いたり線を引いたりする事の方が多いです。
まずはNiagaraEmitterの方を作っていきます。
NiagaraEmitter、NiagaraSystem等がよくわからない方は
www.youtube.comこの解説動画がすごいわかりやすいのでオススメです。
今回作るパーティクルに使うNiagaraEmitterは4種類です。
NE_RotateLockArrow
— 東京高速戦術@VRゲーム制作 (@kousoku_tactics) June 10, 2021
NE_RotateArrowSquiz
— 東京高速戦術@VRゲーム制作 (@kousoku_tactics) June 10, 2021
NE_BorderCircle
ブログ用です。 pic.twitter.com/OpI6PN7I1i
— 東京高速戦術@VRゲーム制作 (@kousoku_tactics) June 10, 2021
NE_CoolUINumber
今回のParticleには共通して平面状のメッシュを利用します。
正方形のひとつの面を持ったメッシュを作成しておきます。UV展開等はそのまま正方形でやっておきます。
僕はBlenderで作成しましたが、シンプルな形状なのでなんのツールでも作れると思います。
一応GigaFile便でダウンロードできるようにしました。他ツールを使うのがめんどくさい時は使ってください。
作っていくエミッタ達は、ほぼ全て
- マテリアルを作成する
- 平面メッシュにマテリアルを張りつける
- エミッタ内でMeshRendererとしてスポーンさせて動かす(色を調整する)
といった流れで作っていきます。
ひとつめのNiagaraEmitterから説明していきます。
NE_RotateLockArrow
— 東京高速戦術@VRゲーム制作 (@kousoku_tactics) June 10, 2021
くるくる回る細い線です。
まずはマテリアルから作っていきます。
やっていることとしては、真ん中に丸の穴の空いた図からその丸より大きい丸の形状を引いて 出来た円の線から角度を指定して切りとっています。
参考にしたもの:
・丸を描く
[UE4] [UMG] はじめてのマテリアル、円を描く｜GiRAFFIC ARTS ジラフィックアーツ｜note
・角度を指定して切りとる
UE4小ネタ ： 円形ゲージの作り方 - ぼっちプログラマのメモ
作ったマテリアルをエミッタに利用します。
エミッタの概要です。
基本的にエミッタの内容は使用するマテリアルを除いて、ほぼ共通した内容なので 詳しく説明します。
Emptyを開始点に作ります。
エミッタの更新からです。
SpawnBurstInstantaneousで最初に一度エミッタをスポーンさせています。
パーティクルのスポーン
PositionModeをSimulationPositionに設定、PositionOffsetを有効化します。
Z軸を調整します。これはパーティクル上でエミッタをどの位置にスポーンさせるか(表示位置)を指定しています。
エミッタの色を指定するColorは後でNiagaraSystemの方にエミッタを追加した際に複数のエミッタに対してまとめて色の変数を追加して管理するので、今はいじらなくて大丈夫です。
パーティクル更新
ParticleStateのKillParticlesWhenLifeTimeHasElapsedのチェックを外します。ライフタイムを無効化して時間経過でエミッタの表示が消滅しないようにするためです。
エミッタの永続化についてはこの記事が参考になります。
UE4 NiagaraのLifetimeを無制限にする方法 - PaperSloth’s diary
UpdateMeshOrientationではメッシュのZ軸の回転を制御しています。NiagaraSystemにエミッタを追加した後で個別に回転を調整(回転の速度を変えたり、逆回転にしたり...)するので、スクショでは-0.3を指定していますが 実際は数値を入れなくても大丈夫です。
レンダリングのタブの"SpriteRenderer"を削除して"MeshRendere"を追加します。
PartickeMeshには最初につくった平面のメッシュを設定します。
"OverrideMaterials"を有効化してさっき作ったマテリアルを設定します。
これでこのエミッタに関しては完成です。
左回りするエミッタが作れているでしょうか
— 東京高速戦術@VRゲーム制作 (@kousoku_tactics) June 10, 2021
次にこのエミッタを作ります。さっき作ったものの、伸び縮みする版みたいな感じです。
エミッタの方はさっきのと共通ですが、伸ぼ縮みするマテリアルを作る必要があります。
マテリアルのノードの概要です。円を作るところは、伸び縮みしないモノを作ったのとほぼ同じです(円の大きさを少し大きくしましたが)。
ここで伸び縮みさせています。Timeの小数点以下を取りだし、sine波にかけて動きをなめらかにします。
出力された数値を角度に変換して円から一部の線を取りだしています
できたマテリアルからエミッタを作ります。
さっき作ったエミッタを複製して作ります。
マテリアルを変更しておきます。
この要領でもうひとつ作ります。
ブログ用です。 pic.twitter.com/OpI6PN7I1i
— 東京高速戦術@VRゲーム制作 (@kousoku_tactics) June 10, 2021
回転する点線のマテリアルを作ります。
ノードの概要です。
放射の図を作ってそこに円状の図を掛けて点線上の円を作りました。
さっきと同じく
作った既存のエミッタを複製して
マテリアルをセットします。
これで今回使うエミッタ、主要な4つのうち3つができました(回転するモノです)。
次に文字を表示するマテリアルを利用したカウントアップしてくれるエミッタを作っていきます。
使用するマテリアルです
この中の"DebugScalarValuesSegment" ノードなのですが、既存のノードを解像したものになっています。
マテリアル上で数値を確認する"DebugScalarValues"ノードを複製します。
使いたい数字反転させ 縦に配置したテクスチャを用意します。
複製したマテリアルノードの中の"Composite"というコメント内のTextureSampleのTextureをさっきの画像のものに設定します
マテリアル内に数値を表示させる方法を色々やったんですけど(実際ある程度上手くいってたんですけど)既存のをいじった方が楽だって気付いちゃいました。
表示する内容を入力するNumberのピンにDynamicParameterのひとつ目のピンに繋ぎます(DynamicParameter側のピンを"Number"とかにしておきます)。
MaximumNumberOfDigitsは表示する小数点以下の桁数を入力しておきます。
文字を表示するエミッタを作ります。"Empty"を元に作成します。
基本的にはさっきまで作ったエミッタと共通ですが、UpdateOrientationで回転を加えることはことはしません。
「パーティクル更新」のタブに
"DynamicMaterialParameter"を追加します。描画した数字のパーティクルの数値を変更するためです。
直接数値をFloat型で指定してもいいと思いますし、僕はfloat from curveで目紛しく数値が変わるようにしました。
マテリアルを数値を表現するマテリアルにしておきます。
NiagaraSystemを作成します。
さっきまで作っていたエミッタを好きなだけ追加します。
基本的には追加するだけでいいのですが、InitializeParticleのPositionOffsetのZ軸をそれぞれ設定します。
要は高さを変えます。
MeshScaleModeをUniformに設定、Scaleをそれぞれ設定します(エミッタのおおきさを変えます)。
UpdateMeshOrientationのRotationVectorのZ軸を変更します(回転量を変えます)。負の数を指定する事で逆回転ができます。
これでNiagaraSystemの完成です。出来たパーティクルをレベルに配置してみてください。
できていますか？
ポストプロセスで露出を少し上げることでもっと「映え」させることができます！
なにかわかりにくい事があったり、間違いがあればTwitterのDMとかにおねがいします。
[ この記事はブログ投稿者の憶測や考えによりつくられています。
よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]
