Unityのパーティクルでエフェクトを演出

# 同じ内容を解説した勉強会の動画
- https://livestream.com/accounts/1839740/events/3063002/videos/68306374

# 概要

画面の演出を作る際に欠かすことのできないパーティクルの仕組みを記法操作とアセットを通じて学ぶ。

# パーティクルとは

Particle(粒子)をEmitter(放射体)からばらまく事でさまざまなエフェクトを作る。粒子には任意のテクスチャやさまざまな効果を設定して強力な表現力を持つ。

UnityにはShurikenというパーティクルシステムが搭載されていて、改良が進んでいる。現行世代では1つのパーティクルコンポーネントでさまざまなコンポーネントを制御できる。

# 使い方

## デフォルトのパーティクル

ひとまずはシーンにパーティクルを配置してみよう。

![](https://www.evernote.com/shard/s22/sh/d9c50675-9663-470f-8700-a3b5dd41cd5d/d4d703e311aa1c163c1be18ed24348be/deep/0/GameObject.png)

<code>GameObject > Create Other > Particle System</code>とする。ヒエラルキーのCreateからでも同様に作成が可能。もしくは既存のGameObjectにAdd Componentし、<code>Effect > Particle System</code>としても良い。

![](https://www.evernote.com/shard/s22/sh/a3628777-00a8-4871-bf72-2816b9562c20/e313db862406fcd07c052c4fd6e46cfa/deep/0/sample1.unity---EffectTest---PC,-Mac-&-Linux-Standalone-と-yandod.png)

シーンに配置されたパーティクルは早速デフォルトの粒子をばら撒き始める。シーン上では選択中のオブジェクトがプレビューとして実際の動作のイメージを確認できる。

## パーティクルのカスタマイズ

![](https://www.evernote.com/shard/s22/sh/c88ccb6e-37d7-43d3-85b3-96ae1be8e6a3/be3666672c0623efa327631a13fb3b5b/deep/0/sample1.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

インスペクタからはパーティクルのさまざまな設定を変更できる。結果はすぐにプレビューできるので見ながら調整する。主要な設定項目と効果は下記の通り。

|コンポーネント|項目|内容|
|:---|:---|:---|
|Particle System|Duration|粒子を放出する長さ。指定した秒数が経過すると停止。|
||Looping|処理をループさせる|
||Start Lifetime|放出された粒子が消えるまでの時間|
||Start Speed|粒子の初速|
||Start Size|粒子のサイズ|
||Start Color|粒子の色。グラデーションなども可能。|
||Gravity Multiplier|重力加速度。|
||Inherit Velocity|エミッタの動きの連動して加算される速度|
||Simulation Space|粒子の動きをワールド基準にするかローカル基準にするか|
||Play On Awake|自動的に放出を開始する|
||Max Particle|粒子の最大数|
|Emission|Rate|単位時間あたりの放出量|
||Time or Distance|粒子の放出を放出源の移動量に反応させるかどうか|
|Shape|Shape|粒子の放出の形状、円錐、球、半球など|
|Color over Lifetime|Color|粒子が放出された後に色を変化させる。透明度変更も可能。|
|Size over Lifetime|Size|粒子が放出された後にサイズを変化させる。|
|Renderer|Render Mode|粒子の描画方法を選択する。|
||Meterial|粒子に表示するマテリアル、テクスチャ|


## パーティクルエディタ

![](https://www.evernote.com/shard/s22/sh/aac268f5-901c-44c0-9317-832181a23915/fd212b3f03a3989e472c5bfe46087984/deep/0/Banners-and-Alerts-と-sample1.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

インスペクタだけでは設定できない詳細な設定は専用のエディタを開く。専用エディタではテクスチャの変更やグラーデーションやスピードのカーブ編集などの重要な設定が可能。

![](https://www.evernote.com/shard/s22/sh/aac268f5-901c-44c0-9317-832181a23915/fd212b3f03a3989e472c5bfe46087984/deep/0/Banners-and-Alerts-と-sample1.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

## グラデーション、カーブの設定

パーティクルエディタで三角が表示されている部分はダブルクリックで詳細編集が出来ます。

![](https://www.evernote.com/shard/s22/sh/130c161a-405d-4af1-8dd7-188d7e93ffd6/91d3ad1e3fd52b1379490c67fd27aa4c/deep/0/sample1.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

定数を設定、カーブで設定、2つの定数間のランダム、2つのカーブ間のランダムなどの選択が可能。

![](https://www.evernote.com/shard/s22/sh/248b25e8-b5fd-41a5-bd0d-ace0928689f3/c2352ebc85b2b1ee6a147bb5b58b6304/deep/0/Gradient-Editor-と-sample1.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

グラーデーションはグラフィックソフトの要領で設定する。

![](https://www.evernote.com/shard/s22/sh/4b0e2843-dff0-4ff9-9dbc-eb66d286d957/c567b7b321a33a2cae693c505530b42e/deep/0/sample1.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

2つのカーブの間からランダムに数値をピックする設定。強力な表現が可能。

## スクリプトから制御

そのままだと出しっぱなしのパーティクルになってしまうのでPlay On Awakeを外し、スクリプトから開始させることで任意のタイミングでエフェクトを再生できる。

```CSharp
using UnityEngine;
using System.Collections;

public class Click : MonoBehaviour {

	// Use this for initialization
	void Start () {
	
	}
	
	// Update is called once per frame
	void Update () {
		if (Input.GetButton("Jump")) {
			particleSystem.Play();
		}
	}
}

```


# アセットを使ってみる

正直、どうしていいかわからないのでまずはアセットを使ってみることにしよう。
つぎの2つのアセットはUnity社が作成していてオーソドックスな構成。

## Simple Particle Pack

![](https://www.evernote.com/shard/s22/sh/60dc83db-4d9c-499e-8830-b5c63cd13c1c/50a75c49a93f3e4260bfcfe85cb7c76d/deep/0/Asset-Store---Simple-Particle-Pack.png)

- 炎
- 爆発
- 火花



## Water FX Pack

![](https://www.evernote.com/shard/s22/sh/57b9a40b-a297-40d8-98d5-cf4ba4853da3/c820ffd3d720927480479057bd2a0661/deep/0/Asset-Store---Water-FX-Pack.png)

- 雨
- 雪
- 蒸気
- 吹き出す蒸気
- 滝

## 殺風景なシーンもあっという間にリッチに。

![](https://www.evernote.com/shard/s22/sh/b1dcebb8-0395-4f27-a3dc-3791337c1cb8/fd6511842645b216b3b812fb2b6a915e/deep/0/sample1.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

Simple Particleの場合は<code>SimpleParticlePack > Resources</code>の下にプレハブがある。Water FXの場合は<code>Water FX Pack > Prefabs</code>の下にプレハブがある。どちらもシーンに配置して利用可能。さらに個別のパーティクルの設定内容を見ることもでき、変更も可能！

# 炎を作ってみる

![](https://www.evernote.com/shard/s22/sh/d53c009d-8484-405d-8868-e5b55c18fcd6/1d3d409abb44e42303d9c51627f8158f/deep/0/frame.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

新しいシーンを作り、Simple TorchとデフォルトのParticleを並べて配置、設定内容を調整して炎のパーティクルを自作してみる。

設定する項目はおおむね下記のとおり。

- Durationを1
- Start Lifetimeを1
- Start Speedを10
- Start Sizeを　Random Between Two Constantにして0.5と1.5
- EmissionのRateを40
- ShapeはConeのまま
- Shapeのangleを0 radiusを0.5 Ramdom directionにチェック

ここまでの途中経過。

![](https://www.evernote.com/shard/s22/sh/52ff22d9-174f-46fb-981b-57f99b9241c0/efe3e8e4337f05c78dbd1e9fc77670da/deep/0/frame.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

- Color over lifetime を設定。 
- ![](https://www.evernote.com/shard/s22/sh/31f9a8f4-6683-4185-ab99-cc43d8d2e330/f4b89f8aed085d53c887babe7f08d5a0/deep/0/Gradient-Editor-と-frame.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

 色を設定することで劇的に改善

![](https://www.evernote.com/shard/s22/sh/d96e8a69-362f-4f66-9069-912b440f6599/5be11cc1866184465228d24c9c1928ff/deep/0/frame.unity---EffectTest---PC,-Mac-&-Linux-Standalone-と-Unityのパーティクルでエフェクトを演出.png)

- Size over lifetime をCurveに設定。パーティクルエディタが必須。3から1へのカーブ

![](https://www.evernote.com/shard/s22/sh/ea1536b5-8da7-4274-89a7-a6175dad04ba/e4fb6c38c558303a16e1634372eabc56/deep/0/frame.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)


かなり近づいてきた。

![](https://www.evernote.com/shard/s22/sh/24fdc8c7-8983-4202-89b8-105230c6bc5d/94300bfd95ed3c25fb55ae9e814d462c/deep/0/frame.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

- Rendererを設定。これもパーティクルエディタが必須。
- Render modeを Stretched Billboard
- Speed Scaleを0.25
- Length Scaleを0

できた！

![](https://www.evernote.com/shard/s22/sh/bc270db1-b729-4845-b3a7-62afadea1190/926367765500336aa4a15bf6b54853b0/deep/0/frame.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)


# 滝を作ってみる

![](https://www.evernote.com/shard/s22/sh/d3dd8cb8-896c-4e74-aabb-eb3a16b3c60d/52edd2c88aa5261426c65d60a09fef26/deep/0/water.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

Waterfallとデフォルトのパーティクルを配置。waterfallは色々とついているが、FX_Waterfall_BigFoam以外は無効にする。

WaterfallはレガシーなParticleを使っており中身がやや異なるので感性を高めて真似ていく。

![](https://www.evernote.com/shard/s22/sh/28784742-526e-470a-9445-a703d8b3b98e/2f4e0c052a1ea9cfc111600c3d755b61/deep/0/water.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

![](https://www.evernote.com/shard/s22/sh/85faf507-af9d-46ff-83ab-161a522b67d6/36d1a10177b9344635801dcc91871ac1/deep/0/water.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)

色々といじってみた結果。

![](https://www.evernote.com/shard/s22/sh/1c4625b4-ec9e-4339-932a-68e1815ce350/70c2191fe1c1d6a1146a25b44a841a88/deep/0/water.unity---EffectTest---PC,-Mac-&-Linux-Standalone.png)