NiagaraでサクッとMorphEffectを作ろう

第8回 UE4勉強会 in 大阪#UE4 #UE4Osaka | @YuyaShiotani
Niagara でサクッと
Morph Effectを作ろう！
Yuya Shiotani

自己紹介
京都のUnrealer 塩谷祐也
学生企画マン
Houdiniはじめました。
蜘蛛男ゲーやりたい

Niagaraで作りました

NiagaraのTutorialも作りました

https://youtu.be/Ad6ABt_Vd5Y

諸注意
以下のモノに関しては、触れません。
• Niagara Dynamic Input Script
• Niagara Parameter Collection/Instance
• Sequencer上での扱い
• Sprite Renderer以外のRenderer
一切触れません

諸注意
• Unreal Engine 4.20を使用して、作成しています。
• Niagaraはアーリーアクセスです！
今後の実装方法とは異なる可能性があります。
• 間違った表現などは、何卒...!!!(こっそり教えてほしいな・・・)

今日の献立

今日の献立
1. Niagaraとは
2. NiagaraのAssetsについて
3. Emitterを作成
4. Moduleを作成
5. 追加編集
6. Systemの作成

Niagaraって？
4.20よりアーリーアクセスとなった
次世代のVFXツールセット

詳しくはこちら
待望のUE4新機能ナイアガラでプログラマブルVFX
- Epic Games Japan - GTMF 2018 TOKYO
• https://youtu.be/KcV-hj42Ppw
• https://www.slideshare.net/EpicGamesJapan/ue4-vfx/EpicGamesJapan/ue4-vfx
公式ドキュメント(英語)
• https://docs.unrealengine.com/en-us/Engine/Niagara/HowTo
公式のLivestream(英語)
• https://youtu.be/s7QpAkzx5eM

Niagaraって？
ぶっちゃけると
新しいエフェクトツール

今回のお題

さて
これ知ってますか？

カッコ良すぎ！！！
惚れた！！！！
再現したい！

今回のお題
Static Mesh で
Morph Effectを作ろう！

Niagaraの有効化
Edit > Plugins > VFXより、有効化できます。
ココ

NiagaraのAssetsについて

今回は、以下の3つを使用します。
System Emitter Module

各々の特徴

System • Emitterを複数扱える
• Set Niagara Variableで値を受けれる
• LevelやBP, Sequencer上で扱える
• 一応、ノードベース. . .
• Emitterにできることはだいたいできる
などなど

• 単一のEmitterのみ扱える
• 複数のModuleを扱える
• 一応、ノードベース. . .
Emitter

• 基本的に処理はココで書く
• 複数のEmitterで使い回せる
• ノードベース
Module

以下は構成の一例

System Emitter
Emitter
Module
Module
Module

ちなみにCascadeで例えると

System Emitter Module
Niagara
Cascade

わからなかった時は、以下のブログを御覧ください！
カニパンチさんのブログ
• http://crabpunch.hatenablog.com/entry/2018/07/22/095242

説明終わり！！

実際にMorph Effectを作成する

Niagara Emitterを作成する

Emitterを作成
Niagara Emitterを作成
名前は”NE_Morph”

開くとこんな感じ

画面構成について

Timeline
Preview
Parameters
EmitterのModuleに関する箇所
ParticleのModuleに関する箇所
Rendererに関する箇所

Emitterの編集へ
戻ります

編集していきます

以下の様な構成にします。Before
使いません
使いません
使いません
使いません

以下の様な構成にします。After

Set Variables内の削除はココ
①
②

Emitter Updateを編集
Emitter Life Cycle内の
Next Loop Durationを”10.0”に

Next Loop Durationとは
Emitterの持つTimelineの長さです。

Emitter Updateを編集
Emitter Updateに
Spawn Burst Instantaneousを追加

Particle Spawnを編集
すると
こういったModuleが追加されます

Spawn Countの値を100000に

Spawn Burst Instantaneousに関して

Spawn Burst Instantaneousとは
いつからいくつParticleをSpawnさせるのか
定義するModule
Spawn Rateと違い、指定時間で全て出る。

Spawn Count：いくつParticleをSpawnさせるのか
Spawn Time：いつからParticleをSpawnさせるのか

Spawn TimeはTimelineでも操作可能
1.95
1.95

Emitterの編集に
戻ります

Particles.LifeTimeを”10”に

または

先程のNext Loop Durationを変数としてSet

Emitterの編集一旦終了

Niagara Module Scriptを作成
Niagara Module Scriptを
2つ作成。名前は
”NM_Morph_PS”
”NM_Morph_PU”

すでに何かある

基本的な構文だと思ってください。
：BPで言うEvent Begin Play
：変数MapをGet
：変数MapをSet
：Moduleの外へ

一例：Particleの位置を加算によって操作
①:MapGetで使用したい変数を用意
①

②:用意した変数を処理
②

③:処理データをMapSetで指定変数に保存
③

説明終わり！

NM_Morph_PSを編集！
したいが…

不要なエラーなどを
回避するために

Bitmaskを使用しよう

Module内の
Details > Scriptへ

ココ

Scriptに関して
Moduleそのものについて
設定する箇所

Module Usage Bitmaskに関して
今回は
Module Usage Bitmask
に注目

Moduleの種類を定義できる
一例：
Particleと付くものにチェック
▼
ParticleのModuleとしてのみ
使用できる制限をかけれる

NM_Morph_PS NM_Morph_PU

MapSetにも影響
Particlesにチェック全てにチェック

Bitmaskを設定して
不要なバグは回避しよう！

今度こそ
NM_Morph_PSを編集

Parameterを追加
+ボタンから
Module以下の
Static Meshを選択
名前は”Module.StartMesh”

Parameterを追加
同じ要領で上記を追加してください
型名前
StaticMesh Module.EndMesh

Parameterに関して

Parameterに関して
Niagaraの各Parameterの管理は
Namespaceが採用されています。
そのためか、画像の
どのStatic Meshを選択しても
“Module.名前”とさえ入力しておけば
ModuleのStatic Meshとして扱えます。
型としては
どれも同じ

Moduleの編集に
戻ります

処理を作成

処理を作成
Module.StartMeshからピンを伸ばし
“Get Tri Position”を追加

処理を作成
先と同じ要領でSMStartからピンを伸ばし
“Random Tri Coord”を追加し、
先のNodeのCoordピンとつなげる

処理を作成
Module.EndMeshピンも同じ様にNodeを用意します

Nodeに関して

ごめんなさい
次のスライドは憶測を含みます

各Nodeに関してここのスライドは憶測を含みます
Static Meshの指定された
重心座標のPositionを取得
Static Meshの持つ三角形の
重心座標をランダムに取得

NM_Morph_PSの編集に
戻ります

MapSetにピンをつなげる
MapSetに上記を追加
型名前
Vector Particles.StartPos
Vector Particles.EndPos

あとは、先のPositionピンから、対応したピンに
接続すればok

処理説明

NM_Morph_PSは終了！
次はNM_Morph_PUを作成！

Parameterを追加
まずは、MapGetで上記を追加
型名前
Vector Particles.StartPos
Vector Particles.EndPos

Parameterを追加
続けて上記を追加してください
型名前
Curve For Floats Module.MorphController
Float Particles.NormalizedAge

処理を作成
Lerpを追加して
ピンをつなげます

処理を作成
Sample Curveを追加して
ピンをつなげます

Nodeに関して
Curveの値からX値時点の
Curveの値を取得する
今回は、
Particleの正規化した再生時間を保持している
NormalizedAgeをXとして使用ました。

NM_Morph_PUの編集へ
戻ります

MapSetに上記を追加し、ピンをつなげて終了！
型名前
Vector Particles.Position

NM_Morph_PUも終了！
再びEmitterへ

EmitterにModuleを追加
Emitter内のParticle Spawnに
NM_Morph_PSを追加

ModuleのParameterを編集
各Default Meshに
Sampleしたい
MeshをSetして使用します
使いません
使いません

今回はEngine Content内の
この2つを使用します

両方のMeshをSetするとこうなります

NM_Morph_PSへの操作は終了
ただ・・・

MeshをSetした際に
CPU access errorが出る事があります
Fix Nowを押すだけで大丈夫です。

なぜ”CPU access error”が出るのか？

なぜCPU access errorが出るのか？
Static Mesh Editor内の
Allow CPUAccessが
FalseだとErrorが発生します

つづけて
Module内のMeshに関して

Default Mesh：
SampleしたいMeshをセットする箇所

Source：
Level上でSampleしたいMeshを選択して使用
Default Meshよりも優先され
SampleしているMeshのTransformも参照する

Section Filter：
複数Materialで構成されるMeshから
指定スロットのMaterialが
適用されている部分だけをサンプルする

• Filterなし
• Slot：0,1
• Slot：0のみ • Slot：1のみ

使用するMeshに関する
注意！！

Support Uniformly Distributed Sampling
(SUDS)に関して

SUDSに関して
Static Mesh Editor内の
Allow CPUAccessの上にあります

SUDSに関して
“メッシュは一定時間内に均一に分布した
サンプリングをサポートします。
メモリコストは、1トライアングル = 8バイト
使用例は、パーティクルの均一なスポーンです。”
とTipsに書かれている

SUDSに関して
ざっくり言うと
Particleを均一に散らすかどうかという
設定

SUDSに関して
違いってどんなもんなん？？

False True
Spawn Count
50000

SUDSに関して
使用するかどうかは
一部を除いて
ケースバイケースです

Emitter内のParticle Updateに
NM_Morph_PUを追加

Curveの扱いはNiagara以外の操作と同じです

Keyを2つ追加します

Time：0.55
Value:1.0
Time：0.45
Value:0.0
Keyの値はそれぞれ

Colorを編集します

Curveの値と同じ箇所にKeyを打つとGood
Time : 0.55Time : 0.45

Emitterの編集は完了！
おや？Emitterのようすが・・・

無事にMorphしたぞ！

Sprite Sizeがいまいち・・・
そうだ、Sprite Sizeも操作しよう！

NM_Morph_PUへ戻りますが

その前に

Module内の処理は
1処理=1MapGet・1MapSet
がオススメ！

というのも

まずは軽いジャブ

素晴らしい可読性

複数処理=1MapGet・1MapSet
One for all, All for one

さて、本番

というのも
素晴らしい可読性

ご想像におまかせします。
複数処理=1MapGet・1MapSet

といった風に
を心がけるかどうかは
可読性に大きく関わる
是非とも、心がけて頂きたい所！

ダメ！スパゲッティ！

NM_Morph_PUを編集してきます

Map Get/Setを追加
まずは、MapGetを追加

そして、MapSetも追加

そして、この様な形にします
先に作った処理のMapSet

Parameterを追加
MapGetに以下を追加
型名前
Float Module.StartSpriteSize
Float Module.EndSpriteSize

Parameterを追加
ここのLocalの値はEmitterで
操作する際の初期値となります。
‘1’を設定しておきましょう。

Parameterを追加
さらにMapGetへ上記を追加
型名前
Curve For Floats Module.MorphController
Float Particles.NormalizedAge

Parameterを追加
そしてMapSetに上記を追加
型名前
Vector2D Particles.SpriteSize

そして、この様にピンをつなげます

NM_Morph_PUの編集は完了！
再びEmitterへ行きたいのだが・・・

ありえない並びになっている！！

Variable Metadataを編集すれば
大丈夫

Variables Metadataを編集
ココがVariable Metadata

Variable Metadataとは

MapGetにて追加した
各Moduleの詳細を設定する箇所

Material EditorのDetailsと同じ感覚

Material Editor Niagara Module

ほぼ一緒！

Module.StartSpriteSize
Module.EndSpriteSize
上記の隠されている
タブを展開

上記を編集
Category
Name
Editor Sort
Priority
M.StartSS SpriteSize 0
M.EndSS SpriteSize 1

リフレッシュボタンを押すと
各Variablesの情報が
更新されます
リフレッシュボタン

すると？

よし…!
見やすい…!

今度こそ！
NM_Morph_PUの編集は完了！
再びEmitterへ

上記の値にします
3.0
1.5

先程よりも、くっきりする！

これで大方終わり！
最後にLevelに配置しよう！

Niagara Systemの作成

Systemの作成
Niagara Systemを作成
名前は“NS_Morph”

Emitterを追加

Emitterを追加
Track > Emitters… > NE_Morph を選択

Emitterを追加
Niagara Emitterと同じ見た目に！

これで、Level上に配置できる！

Level上へD&D

Levelに出てきた！！

あとはPIEでチェックして
終了！

Ok!
まとめだ！

今回作成したモノを
ブラッシュアップすると
こうなります

Editorで見ます

といっても
Niagara
できない事はまだある。

Anim Notifyがほしい
Trail作りたい…
オカダサン…

でもでもでも！！

できる事は
増えている！

Dev-Niagaraについて
(9/7時点)

GitHub上にあります
h t t p s :/ / git h u b .c o m/ E pi c Game s/ Un r e alE n gin e / t re e / de v - n iag ara

Emitter作成時のベースを
選択できるようになりました

その他、テンプレートの追加

サポートされる
変数の型が増えてました！

Texture Sample

これ、できるようになるわけですよ！！

Texture関連のModuleなど

これからも色々追加されそうな
Niagara!
みなさんも是非、触ってみては！？

ありがとうございました

NiagaraでサクッとMorphEffectを作ろう

More Related Content

What's hot

Similar to NiagaraでサクッとMorphEffectを作ろう

NiagaraでサクッとMorphEffectを作ろう