[Unity] ParticleSystemでSpriteの形状に沿ってパーティクルを出現させる

# 実行環境
* Unity2018.2.2f1

# この記事について
この記事は [Unityゆるふわサマーアドベントカレンダー 2018](https://qiita.com/splas_boomerang/items/e6619fb1e6dd92fd231f) の29日目の記事となります。あまり中身のない文章で恐縮ですが、Unity2018.2の新機能である `ParticleSystem` における `SpriteShape` について記載します。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">…楽しい... <a href="https://t.co/Jpu3mlOQHP">pic.twitter.com/Jpu3mlOQHP</a></p>&mdash; 青木とと(ˊᗜˋ*) (@lycoris102) <a href="https://twitter.com/lycoris102/status/1016691419384197120?ref_src=twsrc%5Etfw">2018年7月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 初期状態
UnityEditorに対して以下を配置したものを用意しました。

* SpriteRenderer: いらすとやの画像を指定したもの 
* ParticleSystem: 初期状態からMaterialをひし形状の素材に差し替えたもの

![sp1.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/41763f70-b8de-5e9a-8bd1-f64eec05f0f9.gif)

## Shapeモジュールを変更する

中央に表示されている画像に沿うように ParticleSyatem の設定を変更してみます。
**Unity2018.2から** Shapeモジュールにて `Sprite` および `SpriteRenderer` を設定できるようになりました。
(下記の画像にて左から Unity2018.1 / Unity2018.2 )

![sprite.png](https://qiita-image-store.s3.amazonaws.com/0/102664/02504d97-7b1a-7773-6363-2981378430cf.png)

`Sprite` および `SpriteRenderer` を設定するとモジュール内に `Sprite` という項目が追加されます。

![sprite2.png](https://qiita-image-store.s3.amazonaws.com/0/102664/bfa6f67d-7628-bfdf-8249-2d701e30e9d3.png)

こちらには `Sprite` および `SpriteRenderer` の選択した方のアセット/コンポーネントを指定します。 
今回は `SpriteRender` を選択し Hierarchy からドラッグして `SpriteRenderer` を指定します。
これにより、画像の形状に沿うようにParticleが表示されるようになりました。

![sp2.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/055022ec-3318-e1ed-54a4-e88715d790a9.gif)

3Dモードで見てみましょう。
現在初期のパーティクルの設定に基づき `StartSpeed = 5` で設定されているたのですが、奥行き方面に射出されていました。
また Shape モジュールの `Type` の設定が `Vertex` だったため、画像の頂点から射出されています。
(特定の画像を埋め尽くすように描画させたい場合 `Type` には `Triangle` を指定します)

![sp3.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/e0c11ae2-caf4-086b-09e6-2f058d188baf.gif)

今度はこの画像から全方位にパーティクルを飛ばす設定を入れてみましょう。
Force ove Lifetime モジュールを使用するやり方もありますが、今回は Shape モジュールで完結させます。
Shape モジュール内の `Randomize Direction` を `1` に設定します。
これで `StartSpeed` で設定された速度で完全にランダム方向に射出するようになりました。

![sp4.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/adb79045-4e76-6c77-711d-95d453a35844.gif)

しかし、これだと画像の内側にめり込むような方向で射出されるため、見栄えがよくありません。
Shape モジュール内の `Shaperize Direction` を `1` に設定します。
これにより、画像の中心から外側に向かうような方向で射出されるようになりました。

![sp5.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/f34d9182-fda6-607a-f82d-e6fd469da173.gif)

サイズや色味などを調整して以下のような演出を作ることができました。

![sp6.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/a104405d-7684-da1d-3b81-cd38c7df12d9.gif)

## 残像のような演出を作る

* `StartSpeed = 0` に設定し、その場で留まるようにします
* `Simulation Space` を `World` にします
* `Shape` モジュールの `type` を `Triangle` にし、出現ポイントを頂点から面に変更して埋め尽くすようにします

この状態でオブジェクトを動かすと、出現したパーティクルはその場に留まるため残像が残るような表現になります。
(以下のgifにて `StartSpeed = 0` なのに少し動いているのは `Noise` モジュールで揺らぎを持たせているからです。自然に見えてオススメ)

![sp8.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/1d1e6d52-98f4-6081-205f-a32aadf12ed8.gif)

色味も反映したい場合、同一のSpriteを複製し、Texture用の設定をしたものを用意して
`Shape` モジュールにおける `Texture` を指定すると良さそうです。

![sp9.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/ba683f4c-a1e9-8335-4888-28570e903e89.gif)

## 注意事項
Shape に `SpriteRenderer` を指定する場合、Transformの変更に追従するようになります。
この時、Emitされる範囲だけが変更になるのではなく、完全にパーティクル自体もリサイズされてしまう親子関係のような挙動になってしまっている点に注意してください。

![sp7.gif](https://qiita-image-store.s3.amazonaws.com/0/102664/4b7dc812-ce8e-6a1e-ad6b-b2b4e54f33d3.gif)