[Unity] リアルな炎を作る

# 経緯
Unity でパーティクルシステムの勉強中ですが、試しに炎を作ってみました。
![flame.gif](https://qiita-image-store.s3.amazonaws.com/0/75035/d28c598d-d2b0-4641-87b3-7c0c2ab7316c.gif)

事前に参考になりそうな例をいくつかあさってみましたが、殆どは煙のようなモヤモヤしたテクスチャをアニメーションさせたりしてゆらぎをもたせてるか、ちょっとリアルっぽいものはテクスチャアニメーションになってるか、という印象でした。
例えば Standard Asset の [**FireComplex**](http://tsubakit1.hateblo.jp/entry/2015/10/18/002452) とか。

モヤモヤテクスチャは小さな炎だと違和感が出やすいし、テクスチャアニメーションはパターンが見えてくるように思います。
パーティクルの設定を弄って遊んでいるときに、幅の広めな軌跡(Trail)をランダム移動させたら炎っぽいのではないかと思いついて、試してみました。

# 方針
[こちらの稲妻作成記事](https://qiita.com/ELIXIR/items/593bdb7dc992ad82cdc2
)を参考にさせていただいて色々試していたのですが、
炎を太い軌跡で描いたら炎っぽく見えるんじゃないかと思いました。

初期状態から **Trail** と **Noise** を有効にして（パラメーターは初期値です）, **Renderer** は **RenderMode**: `None`, **Trail Material**: `Default-Particle` にしただけでこんな状態です。既になんとなく炎っぽいですよね？
![step1.gif](https://qiita-image-store.s3.amazonaws.com/0/75035/1291b580-3bd1-a8d9-7dd4-678b2fdd701d.gif)

リアルな炎って、意外と輪郭がくっきり見えるじゃないですか？
それを再現しようと思い、軌跡(Trail)のテクスチャは半透明の帯状にしました。進行方向前後は滑らかに透明になる一方で、（進行方向に対して）横方向には敢えて比較的はっきりした境界を付けます。イメージにするとこんな感じ。
![sample.png](https://qiita-image-store.s3.amazonaws.com/0/75035/a2d96262-5df1-9854-f658-f154476b0abe.png)
**画像の左側が進行方向**になるようです。

# 作り方（基本）
## マテリアル
パーティクル用マテリアルを作って、炎用のテクスチャを貼るだけです。
**Shader** は `Particles/Additive (Soft)` がいいと思います。

| 設定 | 画像 |
|:---|:---|
|![flame-material.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/9bea8345-4d6a-89cc-7fa3-39a2d2cdee26.jpeg)|![horizontallines.png](https://qiita-image-store.s3.amazonaws.com/0/75035/894a8c9d-b24b-22a5-2644-2b1483b04d6d.png)|

右の画像は実際に使用したものです。私が作成したもので大した出来ではありませんが、複製・改変・再配布などに制限はありませんので、ご自由にお使いください。

## Particle System
メインの設定です。
**Duration** と **Lifetime** は炎の高さに応じて調整してください。
**Start Speed** は Shape によっては炎の向きに係わります。一般的な炎なら強くし過ぎない方がいいでしょう。
**Start Size** はランダムにしてます。範囲は炎の大きさに合わせて調節してください。
**Start Color** は一般的な炎ならオレンジで半透明がよいと思います。オレンジのマテリアルが重なると重なった部分は少し黄色っぽくなります。
**Gravity Modifier** は、パーティクルが上の方へ向かうように `-1` を設定しています。
![flame-psystem.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/4d352f3f-0115-86b1-43ca-640f41dd01e8.jpeg)

## Emission
どれくらいのパーティクルを出すかを設定します。
プレビューを見ながらいい感じにしてください。
**Rate over Time** で通常時に出る量を調節します。
**Bursts** を設定することで、定期的にボワッと燃え上がる感じが出せます。
Count は控えめにしたほうが違和感が少ないです。
![flame-emittion.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/cb20e254-47fb-d5d7-e85d-4a811b2e5577.jpeg)

## Shape
パーティクルの出現位置を決めます。
これはもう、目的に合わせてご自由にどうぞ。
ただし広い範囲に出すなら、Emission で沢山パーティクル出すか、**Particle System** の **Start Size** を大きめに設定しないとスカスカになります。
また、**Shape** の種類によっては、パーティクルが噴き出す方向が変わるので、都合が悪いなら **Particle System** の **Start Speed** を小さくして、**Gravity Modifier** だけで動くようにするといいかもしれません。

| 設定 | 画像 |
|:---|:---|
|![flame-shape.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/07b8bacf-a586-8cde-7e51-ce695cf5aae4.jpeg)|![flame-shape-gizmo.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/c6ad54ea-d0c9-e1c2-0fe7-4e8759cbb574.jpeg)|

## Noise
炎にランダムな揺らぎを与えます。炎のサイズによって最適値は変わりますので、いい感じに調節してください。
**Strength** は強すぎると動きがギザギザになるのでほどほどに。沢山揺らがせたい場合は **Position Amount** の方を大きくします。ただし、こちらもほどほどにしないとロケット花火みたいになります。
**Frequency** はゆらぎの周期。炎の高さによりますが、大きすぎず小さすぎずでこれくらいがよいかと思います。
**Size Amount** はパーティクル（この場合一本の帯）の太さをうねうね変えます。炎の帯が帯っぽく見えすぎる場合は、ちょっと大きめにしてみるといいかも。
![flame-noise.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/f102bf5a-ead0-e93f-23d1-64c1650fe4a6.jpeg)

## Trail
パーティクルの移動奇跡を設定します。今回の炎の場合パーティクル本体は描画しませんので、炎そのものと言って差し支えありません。
**Lifetime** を調節してください。小さすぎると変ですが、`1`より小さめの方が揺らいでる感じが出ます。
![flame-trail.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/2996ba7c-a174-0f5c-2831-04f741bacdc4.jpeg)

## Renderer
パーティクルの描画設定です。
パーティクル本体は表示したくないので、**Render Mode** は`None`を指定します。
**Trail Material** には、冒頭で作成したマテリアルを設定します。
![flame-render.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/e82220eb-b19c-4db3-9d35-6f50a2819cba.jpeg)

## 結果
ここまでの設定でこんな感じになりました
![first-step.gif](https://qiita-image-store.s3.amazonaws.com/0/75035/68535de9-a14b-f144-1386-7de0c52cb15e.gif)


# さらにカスタマイズ
## 色に変化を持たせる
**Partice System** の **Start Color** に `Random Between Two Colors` を指定して、ちょっとだけ色に幅を持たせてみました。
![flame-psystem2.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/49c347c6-06af-d204-b4c4-a307b99a63b9.jpeg)

## 炎の先端をいい感じにフェードアウトさせる
**Trails** の **Color over Lifetime** に Gradient を指定して、末端【画面右】で赤くなるように、また透明度を揺らがせて、またたくような効果を出してみました。
![flame-trail2.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/5f08ea91-2703-b6db-f024-c70670e8a2da.jpeg)

## 周りを照らす
**Lights** を設定して、周囲の物体に光を飛ばすようにしました。
取り付けた光は普通にCreateしただけのポイントライトです。このライトはプレハブ化するか、シーンに置く場合は非アクティブにしておきます。
**Ratio**, **Range Multiplier**, **Intensity Multiplier** で適用量を調整します。
![flame-lights.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/6c73f13e-1f38-9017-ce98-2a8b91dbc433.jpeg)

## 回転させる
最初は 2017 で作ってたせいかうまく行かなかったのですが、 2018 以降ならパーティクル回転させられるので、 **Particle System** の **Start Rotation** （範囲を Random にする）と **Noise** の **Rotation Amout** を弄るとよいです。

## 結果
私の場合さらに、**Particle System**, **Shape**, **Emission**, **Lights** などを微調整して冒頭の画像になりました。
![flame.gif](https://qiita-image-store.s3.amazonaws.com/0/75035/d28c598d-d2b0-4641-87b3-7c0c2ab7316c.gif)

# まとめ
焚火くらいのサイズの炎として、思ってた以上にリアルな感じにできたと思います。

球体の全体を炎が包むような感じにしたくて、**Shape** を下記のように弄ってみましたが、あまり包み込んだように見えない ＆ 炎の向きが横方向にばらけたりしてイマイチ調整しにくいなと思いました。
![flame_shape2.jpg](https://qiita-image-store.s3.amazonaws.com/0/75035/1430dff5-c0c8-5377-0ae8-e93500fb49e3.jpeg)
焚火とかにつかうなら、**SubEmitters** で火の粉とか出すとさらにいい感じになりそうです。