ゼロから始めるゲームエフェクトという名目で行う何か。

##初めに

一緒に作るだけです。

今回はUE4のNiagaraを使用します。
バージョンは4.25.0(preview)

ゼロから始めるって書いてますが、結構ハイペースに進みます。

また、細かい理由(なぜこの動作を行っているかなど）は全然説明していません。
自分で値を変えてみるなどして確認してください。

知り合いが「エフェクトなんもわからん」って言ってたので勢いで書きました。

動画画質悪いですが、twitterを恨んでください。

分からないところはTwitterかなにかで聞いてください。

Unity版は気が向いたら。


##ゲームフェクトについて

ゲーム内で使われるエフェクトのほとんどが、
「パーティクル」
という粒子で構成されています。

この粒子に色を付けたり動かしたり形を変えたりしてエフェクトを作ります。

近年はエフェクトデザイナーの人数が足りていない云々。
エフェクトデザイナーの重要性が上がってきた云々。
フリーランスのエフェクトデザイナーの月収は30を余裕で超える超えない云々。
よく言われること「エフェクトで誤魔化せないか」云々。
エフェクトデザイナーの知らないところで盛り上がって
作らないといけないエフェクトが増えてる云々かんぬん。

<br>
今回は簡単に作れる(はずの)このようなエフェクトを作っていきます。
https://twitter.com/Niagara_UE4/status/1236915926181629958?s=20
https://twitter.com/Niagara_UE4/status/1236917352228220932?s=20
<br>
それでは作っていきます。

プロジェクトはサードパーソンかなんかで適当に作っておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/89c658e4-3c39-a5e9-d9ec-a85401447c69.png)


##マテリアルを組んでみる

まずはマテリアルを簡単に組みます。
マテリアルを組むことで、パーティクルの色や形を変えられるようになります。

まずは右クリックからマテリアルを作成、名前は自分がわかるものにしておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/b673a439-1f67-ea9f-d45c-7dddbb73aea2.png)
ダブルクリックして中に入ります。

初めにマテリアルのブレンドモードをTranslusentに変更しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/c8bef158-559f-ca71-036b-376df034909f.png)

右クリックからParticleColorノードを出し、接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/b7cbe611-abb3-9ef2-95f8-441082b79422.png)
これで、エフェクトツールで色と透明度を変えられるようになります。

このままでは四角くなってしまうので、
RadialFradientExponentialというノードを使って円を作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/d3b7bad8-a9a8-ba07-e972-d8dd07ecbfe6.png)
入力が
・UVs
・CenterPosiition
・Radius
・Density
・InvertDensity
とありますが、今回はDensityだけ説明します。
ここでのDensityは境界線の明確さです。
試しに100を接続すると、くっきりとした円になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/277d94c2-f956-6f69-c945-37175c392ee6.png)
今はお好みの数値を入力しておいてください。

その後マテリアルを適用・保存し、マテリアルインスタンスを作成しておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/2aa50700-2e93-362b-de18-891a0686907e.png)
今回はパラメーターを用意していませんが、汎用的なマテリアルを作る場合はパラメーターを多数調整することになるので、マテリアルインスタンスを用意してパラメーターの値を変えられるものを作っておきます。

メンドイ。イラナイ。
って人は今回は作らなくても問題ありません。

<br>
これで最低限のマテリアルは完成しました。
エフェクトの作成に入ります。

##エフェクトを作ってみる

###１つ目
それではエフェクトの作成に入ります。

まずは右クリックからナイアガラエミッター(以下NE)を作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/69f10406-aafa-02b7-6f59-642bcd2da764.png)
無かったらプラグインからNiagaraをONにしてください。

New emitter from a templateから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/ddff8432-6fdd-e088-2d5d-308207abba6f.png)

Simple sprite burstを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/68c9b00a-7e18-a99f-6d9b-036839941838.png)

わけのわからない画面が出てきましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/87c8292a-86de-cc65-b8c3-927ba55598c9.png)

ざっくりと説明します。ざっくりと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/6e7b146e-247f-c08c-1674-9bb7ab5a1665.png)
①エフェクト見るとこ
②時間見るとこ
③変数入ってるとこ
④エフェクトの構成を見るとこ
⑤作るとこ
⑥いつもの
です。

⑤の作るとこが大切なのですが、こんなにごちゃごちゃしていると
英語アレルギーの人や数学アレルギーの人が発狂してしまうので、
左上の三角を押してタブを最小化します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/5921e003-9c48-df6d-68a5-4098be165c2f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/b2e661e2-f950-63a9-ae48-5f4ee97490c7.png)
すっきりしました。
英語は残ります。英語アレルギーの人は諦めてください。

初めにSprite Rendererを開き、先ほど作ったマテリアルを適用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/315473b5-ed1e-d6ab-add0-74822d254e83.png)


Spawn Burst ナントカを開き、
Spawn Countの値を100にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/df966c69-431f-0292-f09f-b81d9d228e11.png)
これでパーティクルが100個できます。

次にInitialize Particleを開き、MassとSpriteSizeをオフにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/5ad62e82-0096-bbfa-db55-3b5b426b90d2.png)

LifeTimeの右の三角から、Uniform Range floatを入れ、Minimumを1、Maximumを2にします。
その後、Colorに自分好みの値を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/e21210dc-4da5-5e8d-d2af-fb08c5ca12e6.png)

これでパーティクルごとに1~2のランダムな値がLifeTimeに入ります。

次にParticle Spawnの右側の+から、
Add Velocity from Pointを選びます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/bbcf6c22-8d78-ce58-da93-95e58eba4305.png)

先ほど使ったUniform Rangeを
Velocity StrengthとOrigin Offsetに適応し、画像のような値にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/7cc91275-06fe-396c-0309-f3c113b26c22.png)

ビューポートで確認すると、目標に近づいてきていることがわかりますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/c97bfe0e-ec6a-53e4-2a3b-4539a15a91f0.png)
(このようになっていない場合は、⑥いつもの からCompileを押してみてください)

次にParticle Updateの+から
Gravity Forceを追加、何か出てきたらFix issueを押しといてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/227b2129-0bcb-1f5f-8dfe-1bf3fcb927d7.png)

同じようにDrag追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/f4816f8e-6468-32b5-28cc-7c93f24bc258.png)

Curl Noise Forceも追加し、値を256にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/b1b86a45-3b88-2688-9e0f-00b66cb7d4d2.png)
(ここでModuleの順番が変わっていますが、④の構成見るとこで変えられます)

これで①見るとこ を見ると、
上に飛んだパーティクルが減速・ランダムにフラフラとしながら落下という形になりました。

だいぶ出来てきましたね。

次に色を調整します
ScaleColorのScaleModeをRGBA Togetherに変更、右の三角からCurveに変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/1da56586-472c-6a24-d4ca-cbb4870f93f4.png)

グラフが出てきたら、右クリックからグラディエントをオフ・カーブをオンにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/b36b501c-f822-e69b-faae-12ba89febda1.png)

全てのポイントを選んで右クリックからAutoにしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/703c2943-1cc5-d431-0740-f4cf8633a524.png)

Alphaからいじるので、RGBの横の目をクリックして隠します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/c6710f66-7393-bbfb-db6b-d99f6c2da54d.png)

終点のハンドルをいじり、徐々に消える形にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/d9f9e205-b601-56f4-61e8-bd2957ed8117.png)

RBGは、
0の時にすべて10
0.1の時にキーを打ち、R:1 G:0.25 B:0.1
1の時にR:0.5 GB:0とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/e59c4aa0-245a-8c60-bf93-ec146543bb89.png)

次にScale Sprite Size by Speedを追加し、値を次のようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/f8fccf57-03fd-9538-87d3-f3708a6264a6.png)
すると、速度によってパーティクルの大きさが変わるようになります。

しかし現状、すべてのパーティクルが縦に伸びています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/e8d2770f-fd02-6865-d3dd-4e4b9806ca5f.png)

これを進行方向に伸ばすために、Sprite RendererのAligmentを
UnalignedからVelociy Alignedに変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/b7d9f7c9-0d74-c8d8-c085-7162172943f7.png)

これでパーティクルが進行方向を向くようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/22424639-55a8-b4e8-e023-f85f549c73a9.png)

最後にScale Sprite Sizeを追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/58e3977d-1dd2-482f-ec92-5598ae11e979.png)
値を図のようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/bf7004e3-6b3b-8b3d-4383-bf211ba174cf.png)

パーティクルのサイズが一定になってしまっているので、
Initialize ParticleのSizeの値をランダムにしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/3ff4c789-8724-6fca-6e18-d314c66aca12.png)


これで
https://twitter.com/Niagara_UE4/status/1236915926181629958?s=20
のエフェクトはほとんどできたので、レベルに配置してみましょう。

まずは右クリックからNiagara Systemを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/9ceb8282-5e08-1ddf-e0b7-0310a83d721e.png)

NewSystem from selected emitterから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/3e2a1c5e-7fbc-41c1-5f20-64219486dd99.png)
先ほど作ったエミッターを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/94b74fbe-7b71-e72d-f815-7f211c81dc30.png)

すると先ほど作成したNEの入ったNSが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/3420dcf1-781f-d550-2b26-efda382d629b.png)
ではこれをレベルに配置します。

レベル上で見ることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/c9dbe99c-2bc9-7638-35d9-24ab35de7f14.png)

今動画と違うのは、パーティクルが地面や壁を貫通してしまっているところだと思います。

なのでパーティクルが壁にぶつかるようにします。

今からはNiagara Systemをいじっていきます。

アップデートにCollisionを追加し、値を図のように変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/36d8d295-0038-922f-4c37-dfc0e1410514.png)

最後に上の方のSystemだかEmitterだかのStateを図のようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/5cb1cb58-4184-6172-aec8-2fac5dabe721.png)
これで2秒ごとにエフェクトがループします。

これで動画と同じものが出来ました。
眺めてにやにやしてください。

###2つ目
次に2つ目の動画のエフェクトを作成します。

先ほど作成したNSを複製します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/6199e369-0dba-5dbc-da0d-84eb99cea4b5.png)

Dragの値を15に変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/93a8c0bb-0b9b-01a1-e7fc-2eecaf1d925b.png)

Add Velocity from Pointの値を変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/722f1645-e3c1-1957-ab32-86d83fad4728.png)

Life Timeも変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/1b9bf68a-b72f-5fa8-d47c-a21c47015848.png)

CurlNoiseの値も変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/779b8123-24fa-4563-873d-1e66f741a82d.png)

以上で2つ目のエフェクトは完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553932/86a50b68-0189-0061-d5dd-18de201b5fbf.png)

簡単でしたね。

##Niagaraで出来ることを適当に考える。
今回は触りませんでしたが
③変数入ってるとこ
からは、
・パーティクルのサイズ
・速度・寿命・色・位置
・重さ・回転量
などのたくさんの情報が入っていて、それぞれを取得することができます。
またそれぞれを使って演算することもできます。

例えば位置なら、
原点から離れれば離れるほど大きくなる
キャラが近づくと赤く光る
速度なら
速度の大きさが100±15の時だけ回転する
速度のx要素が-の時だけ煙が出る

みたいなことが可能です。
このあたりは自分で試してみてください。
細かく記事書くのは面倒なのでこの辺りは前書いたこの記事
https://qiita.com/Niagara_UE4/items/33157631986dd3bc1b1f
を読んでもらえればなんとなく理解できるかもしれません。


##最後に軽く
ゲーム業界にエフェクトデザイナーが少ないだって？？
お前がエフェクトデザイナーになるんだよ！！！！！！

今回のように一つのエミッターを作ってしまえば、
NiagaraSystem側で微調整するだけで全く違うエフェクトを作ることができます。
ちょっと遊んだ奴
https://twitter.com/Niagara_UE4/status/1237268405549281280?s=20

色々なモジュールを追加して、少し遊んでみてエフェクトに慣れてください。
後は機能別サンプルのNiagaraマップをのぞいたりしてみてください。

お前がエフェクトデザイナーになるんだよ！！！！
お前がエフェクトデザイナーになるんだよ！！！！！！！！！！！！！！