【Godot】2Dパーティクルの使い方

# 概要
このページでは、Godot Engineでの2Dパーティクルの使い方を説明します。

# CPUParticle2Dノードを作成
まずは `CPUParticle2D` ノードを作成します。
![Godot_Engine_-_TestParticle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/59f6b020-99d9-dd1c-7ec6-ae7ecdd573bd.png)

初期状態だと何も表示されていません
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/ce4c2020-409c-8011-3178-09f4d8ec8c08.png)

## テクスチャを登録する
パーティクルに使用するテクスチャを登録します
![cross.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/db3fc8ac-b7b6-8ef3-15de-20ec2a8b5b54.png)
真っ白でよくわかりませんが、↑にある画像を任意の名前で保存します。

画像をプロジェクトに登録したら、`Drawing > Texture` にドラッグ＆ドロップします
![Godot_Engine_-_TestParticle____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/44c57be2-1283-2c36-4588-293d2e3dd962.png)

すると登録した画像がパーティクルとして連続で生成されるようになります
![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/862ecd68-b292-faad-33fb-4c0dd2ce9045.gif)

# 各パラメータの説明
パーティクルには多彩なパラメータがあり、それらの数値を変化させればおおよそどのような挙動になるかがわかると思います。
ここでは個人的によく使うパラメータを説明します。

## 発生回数の制御 `Time > One Shot`

`Time > One Shot` にチェックを入れると、一度だけ放出を行います。その後は `emitting` が false となります。
![Godot_Engine_-_TestParticle____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/fbef252a-b30a-a5ae-c025-77d3ec8dbea9.png)

なので、動作チェック中は One Shot にチェック入れず、動きができたらチェックを入れるようにします

## 初期速度の設定 `Initial Velocity`
`Initial Velocity` は初期速度の設定です。
例えばパラメータを以下のように変更すると……
![Godot_Engine_-_TestParticle____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/944e3cec-e9a1-e590-5407-29419ded46da.png)

エフェクトがランダムな速度で放出されるようになります

* Initial Velocity > Velocity: 初期速度
* Initial Velocity > Velocity Random: 初期速度の乱数

![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/2500499e-90b2-4ab8-8fda-46d372bbdf94.gif)

## 発生数の設定 `Amount`
`Amount` の値を変更すると発生数が変化します

![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/eab8aace-348b-385b-2b72-2c26950e2360.gif)

## 放出方向の設定 `Direction`
`Direction > x/y` で基準となる方向を指定します
![Godot_Engine_-_TestParticle____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/73014294-a599-c634-bb24-e971e7f1d6a4.png)
例えば、(x,y) = (1, 0) では右方向が基準となり、(x,y) = (-1, 0) にすると左方向が基準となります。
![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/d860ea13-0fd0-1beb-0828-68bb39d91d8d.gif)

`Direction > Spread` で放出の広がる範囲を制御できます。
例えば、180を指定すると、±180(=360度)となるので、全方向に放出されるようになります。
![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/1f21c430-e55d-f356-1c80-405d89d22be4.gif)

## 回転速度の設定 `Angular Velocity`

* `Angular Velocity > Velocity`: 回転速度
* `Angular Velocity > Velocity Random`: 回転速度の乱数

![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/07d94d22-5362-f367-3215-52042386e259.gif)

## 拡大率の指定 `Scale`

* `Scale > Scale Amount`: 拡大倍率
* `Scale > Scale Random`: 拡大倍率の乱数

徐々にサイズを縮小するアニメーションを作るには、`Scale Amount Curve` を使います。
[空] という部分をクリックすると 「新規Curve」が表示されるのでこれをクリックします。
![Godot_Engine_-_TestParticle____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/42f7f001-547a-3729-1324-77ffe52902fc.png)

さらにクリックするとアニメーショングラフが表示されます。
![Godot_Engine_-_TestParticle____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/fd4babae-0815-95c6-de00-2153b5599592.png)

そしてグラフの上で右クリックして制御点を配置していくと、時間経過で拡大値が変化するアニメーションを作ることができるようになります。
![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/4c6487c7-13ae-0bce-423c-d4d77d7209db.gif)

## ブレンドモードの設定 `CanvasItem > Material`
最後にブレンドモードの設定です。

`CanvasItem > Material` の [空]をクリックして、`新規CanvasItemMaterial` を選びます。
![Godot_Engine_-_TestParticle____.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/c8564b54-357d-3e01-8de9-f55ce8895443.png)
そして、CanvasItemをクリックして、`Blend Mode` を `Add` にすると加算ブレンドが有効になります。

![shot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43772/6f5718af-b4cb-6ce7-6da4-47b0b80ee803.gif)

# 参考

* [Godot Docs » 2D » パーティクルシステム(2D)](https://docs.godotengine.org/ja/stable/tutorials/2d/particle_systems_2d.html)