[Unity]リアルな炎のエフェクトを作ってみた

# 炎のエフェクトをPartcle Systemで作ってみたので備忘録として

:::note info
使用PC： MacBook Pro (13-inch, M1, 2020)
OSバージョン: 11.5.2
Unityバージョン：2020.3.30f
:::

# 完成図

形はあまり好きではないけど妥協した(°▽°)

![画面収録-2022-03-25-1.58.39.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/fb8ea6ea-570c-03b0-7f08-ff3d55a60591.gif)

# 作り方
「炎・火の粉・煙」の3部構成になってます！

## 炎部分
**① 【Hierarchy】→【Effect】→【Particle System】で作成し、名前を`fire`に変更**
![スクリーンショット 2022-03-25 2.06.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/35fa8a53-a7fd-f0ce-53be-743554404498.png)

**② 【Inspector】からモジュール設定を画像のように行う**

 | プロパティ名 |　設定 | 数値 |
|:-----------|:------------|:------------|
| Start Lifetime       | Random Between Two Constants        | 0.5 - 2       |
| Start Speed     | Random Between Two Constants       | 0.5 - 1       |
| Start Size       | Random Between Two Constants        | 0.5 - 1         |
| Start Rotation         | Random Between Two Constants           | 0 - 360   |
| Gravity Modifier       | -   | -0.2       |

![スクリーンショット 2022-03-25 2.19.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/94e5330a-849a-f62f-97e7-385e45e12fa2.png)

**③ 【Inspector】でその他の設定を以下の画像のように行う**

 | モジュール名 | プロパティ名 |　設定 | 数値 |
|:-----------|:-----------|:------------|:------------|
| Emission       | Rate over Time       | -       |40|
| Shape     | Radious    | -       |0.2|
| Rotation over Lifetime       | Angular Velocity      |Random Between Two Constants      |-45 - 45|

![スクリーンショット 2022-03-25 2.25.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/ce519baf-29e7-01d6-b727-f2c8965796aa.png)

![スクリーンショット 2022-03-25 2.33.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/2a2358dd-30b4-a65d-fbb8-7daf4c6fdf32.png)


**④色の設定を行う**
1. [Color over Lifetime]→[Color]の横の白色のボックスみたいなものをクリックして[Gradient Editor]を表示する
![スクリーンショット 2022-03-25 2.38.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/b0ca46f4-fbd2-8cb2-8fca-247f93216ee6.png)

2. 色変化の設定を行う。いい感じな黄色になるように自由に設定してみてください。
 ![スクリーンショット 2022-03-25 3.12.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/29b86554-c114-765b-b1b5-d8cd668a9794.png)

3. 色の追加。前に設定した色からいい感じのグラデーションになるように設定していきます。
 ![スクリーンショット 2022-03-25 3.18.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/dac0cb32-fa4c-34bf-d842-d77d5a3f06c1.png)

4. 2と3を繰り返し、`明るい黄色→黄色→オレンジ→赤`へと色が変化するように変更を加えていく
![スクリーンショット 2022-03-25 3.25.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/5cbb8f93-0784-350f-2937-1d1975728e08.png)

5. Alphaの設定。　色変更と同じ要領で、一番左はAlphaを0に、適当なところをクリックしていい感じのところでAlphaをmaxにする。
![スクリーンショット 2022-03-25 3.27.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/fcad75ea-45cb-6619-9ffd-83ce4fe0365d.png)
![スクリーンショット 2022-03-25 3.29.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/b5e80c3b-4c0d-4455-2ff4-31675868fb77.png)


## 火の粉部分
**① 炎部分と同様に、【Hierarchy】→【Effect】→【Particle System】で作成し、名前を`hinoko`に変更**

**② 【Inspector】からモジュールを画像のように設定する**

 | プロパティ名 |　設定 | 数値 |
|:-----------|:------------|:------------|
| Start Lifetime       | Random Between Two Constants        | 1 - 1.5       |
| Start Speed     | Random Between Two Constants       | 0.5 - 1       |
| Start Size       | Random Between Two Constants        | 0.2 - 0.3         |
| Gravity Modifir       | -   | -0.2       |

![スクリーンショット 2022-03-25 3.37.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/559578ad-936f-5246-b5bf-53594c623926.png)

**③ 【Inspector】でその他の設定を以下の画像のように行う**

 | モジュール名 | プロパティ名 |　設定 | 数値 |
|:-----------|:-----------|:------------|:------------|
| Shape      |     Angle   | -       |20|
| Shape     | Radious    | -       |0.2|

![スクリーンショット 2022-03-25 3.57.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/8aa5f538-08cd-7666-ea78-73e1f7b45701.png)


**④色の設定を行う**
1. 炎部分と同様に`明るい黄色→黄色→オレンジ→赤`へと色が変化するように変更を加えていく

1. Alphaの設定。最後が0になるように変更する。
 ![スクリーンショット 2022-03-25 4.01.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/12de4abd-5cc2-4654-1c6a-db592f013596.png)


## 煙部分
**① 【Hierarchy】→【Effect】→【Particle System】で作成し、名前を`smoke`に変更**

**② 【Inspector】からモジュールを画像のように設定する**

 | プロパティ名 |　設定 | 数値 |
|:-----------|:------------|:------------|
| Start Lifetime       | Random Between Two Constants        | 1 - 1.2       |
| Start Speed     | Random Between Two Constants       | 0.3 - 0.5       |
| Start Size       | Random Between Two Constants        | 1 - 2         |
| Start Rotation         | Random Between Two Constants           | 0 - 360   |
| Gravity Modifir       | -   | -0.2       |
| Start Color       | -   | A → 130       |

![スクリーンショット 2022-03-25 4.07.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/4ea68ae9-9758-24c0-d8e5-1c2dcf2c7c09.png)


**③ 【Inspector】でその他の設定を以下の画像のように行う**
 | モジュール名 | プロパティ名 |　設定 | 数値 |
|:-----------|:-----------|:------------|:------------|
| Emission  |   Rate over Time   | -       |20|
| Shape     | Angle    | -       |25|
| Shape     |Radious    | -       |0.05|
| Rotation over Lifetime     |Angukar Velocity    | Random Between Two Constants     |-45 - 45|

![スクリーンショット 2022-03-25 8.30.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/d79ff31c-e3e3-b609-38d4-3720ac4dc347.png)
![スクリーンショット 2022-03-25 8.32.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/fed27fab-5081-3121-8d51-25b9fde198e8.png)

**④色の設定を行う**
1. 火の粉部分と同じ要領でに`明るい黄色→黄色→オレンジ→赤黒`へと色が変化するように変更を加えていく
1. Alphaの設定も火の粉と同じ感じにする
![スクリーンショット 2022-03-25 8.37.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/eb33b057-dd98-fc9f-fe98-78b1bb8eafcb.png)

## 3つのオブジェクトをいい感じの位置に調整したら完成！！！！！