スマブラのエフェクトをUE4で作ろう！【その１】

#はじめに
・UE4のバージョンは4.27.2
・Niagaraを使って作ります


#お題「ソーラーブリット」
![800px-ファイター解説_ロックマン_弱攻撃.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/3b7f5457-9089-91da-b437-b52f36a05127.jpeg "ロックバスターじゃないらしい")

#マテリアル作成
※最初なので発射時の青い光と輪みたいなのは作りません。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/c08f2e65-5429-5b9e-f4a9-8b141f9ef2e2.png)
まずマテリアルを作ります、名前は分かりやすいように「M_SolarBullet」しました。

#BlendMode と ShadingModel の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/4ba9f0d7-4061-b3b7-6b8e-c8fd1eaf650a.png)
次に Blend Mode を「Opaque」から「Translucent」に
Shading Model を「Default Lit」から「Unlit」に変更します


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/b0166ce7-fb7e-546a-bb61-63f85de99273.png)
「Translucent」にすることで半透明に
「Unlit」にすることでライティングの影響を受けないようにします。
煙や岩などのライティングが必要なエフェクトは「Default Lit」でいいです。

#色と透明箇所の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/f9ac4953-dde7-4400-d9c2-d91af601dd3f.png)
確認しやすいように左上のプレビューのメッシュの形状をキューブにして
「SphareGradient-2D」ノードのをオパシティ（透明度）につないでみましょう
これだけで円形になります　とても便利ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/ef77d81b-a375-dd41-3720-44376af03c8a.png)
さっきの状態だと色がついていないので、「Particle Color」ノードを繋いで画像の通り繋ぎましょう
「Particle Color」ノードはNiagara側で色を変えることができるノードです
色が固定なら直接色のノードを繋いでもいいのですが、バリエーションはあるに越したことはないのでこれで行きましょう。
謎の「Multiply」ノードは掛け算を行うノードで
_「Particle Color」の透明_ _×_ _円の形の透明_
を行うことでNiagara側で透明度を変えれるようにします。
これでマテリアルは完成です。

#Niagaraシステムの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/dd7a532a-f8ec-1ff8-c835-055cee84e245.png)
コンテンツブラウザーで右クリック ⇒ [FX] ⇒ [Niagaraシステム] を選択して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/da6812f5-5f15-afeb-7e5e-4681482f0703.png)
「空のシステムを作成」を押した後に終了でNiagaraシステムを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/629140c5-67d3-62e1-d8a4-37eae1a2e829.png)
名前は例のごとく「NS_SolarBullet」です。


#ところで「システム」「エミッター」ってなんですか？
・「エミッター」がパーティクル（粒子）を飛ばす人
・「システム」が「エミッター」を管理する人
　　　　　　　　　　　　　　　　　　　　　　　　　みたいなイメージ持ってれば大丈夫です。

#Niagaraエミッターの作成
先ほど作ったのが「エミッター」を管理する「システム」なのでまだ「エミッター」はいません。
なので、「NS_SolarBullet」をダブルクリックしてエディター開きましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/d94ec6e8-2dfe-2eec-7418-a0c4538d9e69.png)
エディター画面になったら真ん中らへんで
右クリック ⇒ [エミッタを追加] ⇒ テンプレートの中の Empty を選びましょう。　

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/c51fbfd9-6e29-00d0-e7eb-f8abfe58b2c7.png)
するとエミッターが現れ画面下のタイムラインが動き出します。（何もないけど）
ひとまずエミッターの作成は完了です。

#マテリアルの適用
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/c4844527-8691-737c-9c55-bf5dcc568ba6.png)
何かすでに似たようなマテリアルがありますが気にせずに
画像の箇所をクリックしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/3a07dea4-90fc-d56d-dde7-44020b5c99a0.png)
すると画面の右側にプロパティがでるので
一番上の「Material」を作った「M_SolarBullet」に変えましょう。
パーティクルをスポーン（生成）していないのでまだ何も出ません。

#パーティクルのスポーン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/5f8a0f07-1a8f-6871-7d50-c13c678756e4.png)
パーティクルがスポーンしていないので、エミッターさんにパーティクルをスポーンしてもらいましょう
[エミッターの更新]を押すとタブが出るので、「Spawn Rate」 モジュールを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/882b0842-5a4a-e582-9547-5bb982e1be49.png)
モジュールを追加するとプロパティに「Spawn Rate」(１秒があたりの生成数)が変更できるので
取り合えず１００くらいにしておきましょう。
位置が同じなので生成数を増やしても見分けは着きません。

#「モジュール」って何？
簡単に言えば部品
　　「色を変える」
　　「生成する」
　　「動かす」
　　　　　　　　みたいなパーティクルに対する操作をエミッターに持たせるイメージ

#パーティクルを動かそう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/db225e77-201e-eeb4-e2aa-0ec2dd91bf6f.png)
パーティクルを動かすためには[パーティクル更新]から「Curl Noise Force」モジュールを追加しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/9e90474f-4c60-47c5-f385-01695fc167ce.png)
追加すると「前提のモジュールたりないですよ」と怒られるので問題を修正を押しましょう
Niagaraはモジュールが足りないと教えてくれる上に直してくれるので楽です。

デフォルトの値だと動きが分かりにくいので、
「Noise Strength」と「Noise Frequency」を 1000 にしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/7714a78a-d992-6eb1-12e5-0a877b80e9aa.png)
わぁ～（）

#ソーラーブリットに近づける（１）
このままだと最後の切り札になってしまうので、
「Curl Noise Force」と、一緒に追加された「Solve Force and Velocity」を消しましょう。
「Delete」キーもしくは右クリックから削除で消せます。

そもそも一発ずつしか出てないので「Spawn Rate」を１にすればいいのではと思いますが、
「Spawn Rate」自体ループするエフェクトなどに使うモジュールなので使いません。

「Spawn Rate」を削除して代わりに「Spawn Burst Instantaneous」を追加します。
「Instantaneous」という単語ははじめて知ったのでGoogle翻訳さんに翻訳してもらいました

「瞬時にスポーンバースト」だそうです、割と伝わりますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/95288cac-f8df-bf99-e46b-0c76587d19d5.png)
SpawnCount：生成数
SpawnTime：生成までの秒数
なのでそのままで大丈夫です。

#ソーラーブリットに近づける（２）
色が明らかに違うので合わせていきましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/6f2646d6-0c66-556a-6834-94bd32b5c6bb.png)

元からある「Initialize Particle」モジュールのプロパティを表示して
「Point Attributes」の中の「Color Mode」を「Unset」から「Direct Set」にして
それっぽい色にしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/cc1e80b5-a427-68c1-e29a-aebc654048ff.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/b00312f5-2ff4-1976-34ed-dcbb796d6c1a.png)
テニスボールみたいですね

#ソーラーブリットに近づける（３）
色もそれっぽくなったので次は形を変えましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/bdcfc928-1af8-3bcf-dfb1-fe6ba3209167.png)

先ほどと同じく「Initialize Particle」モジュールのプロパティから
「Sprite Attributes」の中の「Sprite Size Mode」を「Unset」から「Non-Uniform」にして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/a95bd7ba-7330-74e8-72d7-5db93fb68c87.png)
このくらいでいいかな
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/e8e3edaf-8172-c231-64dd-ff03ca644a49.png)


![download.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/5294de04-e1e7-b7d8-7fae-29b3e774efd4.jpeg)

#ソーラーブリットに近づける（４）
いよいよ発射するときが来ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/fbd40249-dc65-0fac-d5fa-35141f4a2c37.png)
[パーティクルのスポーン]から「Add Velocity」を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/3c520ca4-f853-cc35-cf8d-4a8c0bed2767.png)
警告が出るので、下の方の問題を修正をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/f13c9220-07b2-7fad-4da8-3e7a7d210cf6.png)
「Add Velocity」の「Velocity」のXを 500 くらいにする
Niagaraはここまで

#レベル上で確認しよう
そのまま設置してもいいのですが、ループしないエフェクトのため確認しづらいです。
なのでレベルブループリントから呼び出してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/da14ae36-9fdd-0c2d-be7b-73bd6ca65422.png)
Niagaraシステムは「Spawn System at Location」ノードで呼び出すことができます。

#完成！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481772/835c29d2-f51b-a560-7c6f-599d918c794f.png)
・SileScrollTemplateを使用していたので「Add Velocity」の値をYの-500に変えました
・小さくて見えずらかったのでサイズも少し大きくしました

#おわり
お疲れさまでした！まだまだ分からないことだらけだと思いますが、
エフェクトを作成する際の流れを少しでも掴めたら良いかなと思います。