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

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

【UE4】4.25でNiagaraを使ってエフェクトを作っていこう(その2)

その1の続きでエフェクト作りましょう(^ω^)

前回の続きでエフェクトを作ってみます。

今回は簡単な魔法陣の作成をしてみようと思います。

UE4.25を使用しています。

※個人で作っているものなのでもう少し効率が良い作り方もあると思います。

 そういったことがありましたらぜひコメントお願いします。

その1はこちらになります!よかったら見てみてください

argonauts.hatenablog.jp

画像やマテリアルの準備

まず今回作成する魔法陣を作成する上で、

テクスチャとマテリアルを用意する必要があります。

今回は下の三つのテクスチャを使用して魔法陣を作ります。

f:id:yoshikata1990:20200724234213p:plain

円のテクスチャ

f:id:yoshikata1990:20200724234240p:plain

文字テクスチャ

f:id:yoshikata1990:20200724234256p:plain

六芒星マーク

上記のテクスチャはそれぞれマテリアルになるので

マテリアルをそれぞれ作成していきます。

マテリアルの設定は下記のように設定しています。

・Blend Mode:Translucent(半透明)

・Two Sides:True(両面に表示するかどうかをONにする)

f:id:yoshikata1990:20200725004119p:plain

マテリアルの設定

マテリアルノードについては簡単で、

Particleカラーのカラーとオパシティをそれぞれのテクスチャと乗算して、

マテリアルに適応しています。

※色等はナイアガラエミッタの方で設定するためこちらでの設定はしてません。

f:id:yoshikata1990:20200725004141p:plain

魔法陣用のマテリアルノー

円以外もほかのマテリアルも同様に作成します。

マテリアルの準備は以上になります。

各魔方陣パーツのエミッタの作成

マテリアルを完了したらナイアガラエミッタを作成していきます。

まずはナイアガラエミッタを追加します。

今回は何もないEmptyから作っていきます。

f:id:yoshikata1990:20200725092847p:plain

Emptyのエミッタ作成時の状態

上のEmptyの初期状態から下の画像のように、

各種エフェクトの動きを作っていきます。

f:id:yoshikata1990:20200725013451p:plain

今回行うエミッタの設定

まずはレンダリングでMesh Rendererを追加して、

表示するメッシュを選択します。

※今回は先ほど作成した半透明マテリアルをプレーンに指定して表示します。

f:id:yoshikata1990:20200725082659p:plain

Mesh Rendererの追加

追加したらモデルとマテリアルを設定します。

今回変更しているのは上記の2点のみです。

初期で設定されているSprite Rendererについては削除します。

※マテリアルについてはOverride MaterialsをONにして設定してください

f:id:yoshikata1990:20200725083122p:plain

Mesh Rendererでのマテリアルとmeshの指定

MeshRenderの設定が完了したら今度は各動きなどの設定をします。

まずはEmitter Settingでエミッタの発生の設定を行います。

今回は1度だけ表示するという動作にしています。

f:id:yoshikata1990:20200725091313p:plain

Enutter Stateの設定

続いて1度にすべてのパーティクルを表示するための設定を、

Spawn Burst Instantaneousを追加します。

※エミッタの更新の+ボタンから追加します。

f:id:yoshikata1990:20200725093238p:plain

SpawnBurstInstantaneousの追加

今回は1つしか表示しないかつすぐ表示してほしいので、

下記の設定にしています。

SpawnCount(表示する個数):1

SpawnTime(表示するタイミング):0

f:id:yoshikata1990:20200725093628p:plain

SpawnBurstInstantaneousの設定

ここまでがエミッタの更新項目の箇所になります。

今度はパーティクルのスポーンの設定を変更します。

今回はInitialize Particleというスポーンの設定をします。

LifeTime(表示時間)を10に変更しています。

f:id:yoshikata1990:20200725094857p:plain

LifeTimeの設定

ここからはパーティクルの更新部分を作成していきます。

ParticleStateは初期状態のKill Prticles When Lifetimeに、

チェックが入っているか確認してください。

これはLifetime終了時に終了する設定になっています。

f:id:yoshikata1990:20200725095245p:plain

ParticleStateの状態

止まっているだけだとつまらないので、

動きなども付けてみましょう!

今回使用するのはScaleColor・ScaleSizeMesh、

Update Mesh Orientationの3種類です。

パーティクル更新の+ボタンから追加しましょう。

f:id:yoshikata1990:20200725100229p:plain

パーティクル更新の追加

まず回転させるためのUpdateMeshOrientationを追加します。

RotationVectorで回転する方向などを指定して、

RotationRateで回転感覚を設定します。

f:id:yoshikata1990:20200725102427p:plain

Update Mesh Orientation

続いてScaleColorを追加し動的に色を変更してみようと思います。

数値の右にある▼を選択して動的に設定します。

f:id:yoshikata1990:20200725104035p:plain

ParticleColorの動的設定

▼を選択するとNiagaraFunctionを指定して動的に動かしたりすることができます。

今回はcurveで検索して表示されるScale Vector by Curveを使用します。

f:id:yoshikata1990:20200725104431p:plain

Scale Vector by Curve

上記を選択するとUE4おなじみのタイムラインなどで使える、

グラフのようなものが表示されます。

shiftキーでキーを指定して、各種数値を指定していきます。

今回は青色と緑色のみ指定します。

f:id:yoshikata1990:20200725105604p:plain

色の設定をタイムラインで設定

数値化すると下記の通りになります。

青:1つ目:時間:1.25 値:45 2つ目: 時間:3.25 値:87.16

緑:1つ目:時間:1.39 値:21 2つ目: 時間:3.25 値:164.67

大きさの方も同じようにScale Mesh Sizeを追加して使用します。

f:id:yoshikata1990:20200725110342p:plain

ScaleMeshSizeの設定

数値は以下の通りです。
XYZ:1つ目:時間:3 値:1

XYZ:2つ目:時間:8 値:1 

XYZ:3つ目:時間:10 値:0

以上でエミッタ一つの作成が完了です。

実際に出来上がったのが下の画像になります。

f:id:yoshikata1990:20200725110931p:plain

エミッタの完成

円でのエミッタを作成しましたが、上記と同じ要領でもう二つ作成します。

円のエミッタをコピーして練習で色とかサイズ移動を変更してみると良いです。

f:id:yoshikata1990:20200725111306p:plain

回転する文字のエミッタ

f:id:yoshikata1990:20200725111332p:plain

中心のエミッタ

以上でエミッタの作成は完了です。

最後にNiagaraSystemの方で追加して完了です。

ナイアガラシステムを作成

ナイアガラシステムに追加して作成したエミッタを追加します。

ナイアガラシステムで右クリックしてエミッタを追加します。

f:id:yoshikata1990:20200725112404p:plain

エミッタの追加

追加すると下記のような画面になります。

合体するといい感じの魔法陣ぽくなります(・ω・)

f:id:yoshikata1990:20200725112750p:plain

ナイアガラシステムで統合したエフェクト

また、ナイアガラシステム上でエミッタの色を変更しただけでも

雰囲気が変化するのでとても楽しいです!

動かしたものは下の感じになっています。

変更方法はエミッタの時と同じで、

変更したいエミッタのScaleColorのグラフを変更するだけです。

f:id:yoshikata1990:20200725113642p:plain

ナイアガラシステムからエミッタの設定変更

ちょっと赤と黄色に色を変更してみました。

実際に変更したのは下の絵になります!

f:id:yoshikata1990:20200725113124p:plain

ナイアガラシステム上で色を変更した場合

以上でナイアガラシステムでのエミッタの追加・エミッタの設定変更になります。

今回は以上になります。

レーザーやディゾルブなどは申し訳ないですが別の機会に細かく説明していきます!