Cocos Creator 3 カンタン2Dゲーム制作(5)【パーティクルの使い方】

# ページ一覧

__Cocos Creator 3 導入編__
- [Cocos Creator 3 ダウンロード](https://qiita.com/Hiro256/items/941b196f2e3f0db9e7da)
- [Cocos Creator 3 インストール](https://qiita.com/Hiro256/items/056e922af7821e482e88)

__Cocos Creator 3 カンタン2Dゲーム制作__
- [プロジェクト作成と画面の説明](https://qiita.com/Hiro256/items/ee21f1aa5dc452f8e992)
- [(1)【トゥイーンの使い方】](https://qiita.com/Hiro256/items/872f82fe7c875106faaf)
- [(2)【プレハブの使い方】](https://qiita.com/Hiro256/items/26c4da8b46565e319471)
- [(3)【衝突判定（コライダの使い方）】](https://qiita.com/Hiro256/items/153777d22a3e24e4bb5a)
- [(4)【アニメーションクリップの使い方】](https://qiita.com/Hiro256/items/f077e64bdc047bc8ef16)
- (5)【パーティクルの使い方】← __本記事__
- [(6)【ラベルアトラスの使い方】](https://qiita.com/Hiro256/items/a0716a722a709414afe6)

# パーティクルの作成
ここではパーティクルという機能を使って、魚がコインを取ったときの演出を追加します。
パーティクルをプレハブ化し、コインを取るごとに画面に追加します。

# パーティクルファイルの追加

`Script`フォルダからどれでもいいのでスクリプトをVSCodeで開きます。
VSCodeが立ち上がたら、`Images`フォルダに新しくファイルを作り、名前を`CoinShower.plist`とします。以下の内容を記述します。

```xml:CoinShower.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>angle</key>
    <integer>0</integer>
    <key>angleVariance</key>
    <integer>360</integer>
    <key>blendFuncDestination</key>
    <integer>1</integer>
    <key>blendFuncSource</key>
    <integer>2</integer>
    <key>duration</key>
    <integer>2</integer>
    <key>emitterType</key>
    <integer>1</integer>
    <key>finishColorAlpha</key>
    <integer>0</integer>
    <key>finishColorBlue</key>
    <integer>0</integer>
    <key>finishColorGreen</key>
    <integer>0</integer>
    <key>finishColorRed</key>
    <integer>0</integer>
    <key>finishColorVarianceAlpha</key>
    <integer>0</integer>
    <key>finishColorVarianceBlue</key>
    <integer>0</integer>
    <key>finishColorVarianceGreen</key>
    <integer>0</integer>
    <key>finishColorVarianceRed</key>
    <integer>0</integer>
    <key>finishParticleSize</key>
    <integer>85</integer>
    <key>finishParticleSizeVariance</key>
    <integer>0</integer>
    <key>gravityx</key>
    <integer>0</integer>
    <key>gravityy</key>
    <integer>0</integer>
    <key>maxParticles</key>
    <integer>15</integer>
    <key>maxRadius</key>
    <integer>60</integer>
    <key>maxRadiusVariance</key>
    <integer>0</integer>
    <key>minRadius</key>
    <integer>60</integer>
    <key>particleLifespan</key>
    <integer>10</integer>
    <key>particleLifespanVariance</key>
    <integer>0</integer>
    <key>radialAccelVariance</key>
    <integer>0</integer>
    <key>radialAcceleration</key>
    <integer>0</integer>
    <key>rotatePerSecond</key>
    <integer>85</integer>
    <key>rotatePerSecondVariance</key>
    <integer>33</integer>
    <key>rotationEnd</key>
    <integer>0</integer>
    <key>rotationEndVariance</key>
    <integer>0</integer>
    <key>rotationStart</key>
    <integer>0</integer>
    <key>rotationStartVariance</key>
    <integer>0</integer>
    <key>sourcePositionVariancex</key>
    <integer>0</integer>
    <key>sourcePositionVariancey</key>
    <integer>0</integer>
    <key>sourcePositionx</key>
    <real>373.7277526855469</real>
    <key>sourcePositiony</key>
    <real>478.40472412109375</real>
    <key>speed</key>
    <integer>180</integer>
    <key>speedVariance</key>
    <integer>50</integer>
    <key>startColorAlpha</key>
    <real>0.8</real>
    <key>startColorBlue</key>
    <real>0.25098039215686274</real>
    <key>startColorGreen</key>
    <real>0.6745098039215687</real>
    <key>startColorRed</key>
    <real>0.5568627450980392</real>
    <key>startColorVarianceAlpha</key>
    <integer>0</integer>
    <key>startColorVarianceBlue</key>
    <real>0.27450980392156865</real>
    <key>startColorVarianceGreen</key>
    <real>0.27450980392156865</real>
    <key>startColorVarianceRed</key>
    <real>0.6392156862745098</real>
    <key>startParticleSize</key>
    <integer>20</integer>
    <key>startParticleSizeVariance</key>
    <integer>0</integer>
    <key>tangentialAccelVariance</key>
    <integer>0</integer>
    <key>tangentialAcceleration</key>
    <integer>80</integer>
    <key>positionType</key>
    <integer>0</integer>
    <key>rotationIsDir</key>
    <false/>
    <key>minRadiusVariance</key>
    <integer>0</integer>
    <key>emissionRate</key>
    <integer>15</integer>
    <key>textureFileName</key>
    <string>Coin.png</string>
  </dict>
</plist>
```

CocosCreator に戻り、今追加した`CoinShower`を選択します。
`CoinShower`をヒエラルキーパネルにドラッグ＆ドロップでコピーし、ノードを作ります。
さらにそのノードをアセットパネルの`Prefab`フォルダにコピーし、プレハブ化します。
ヒエラルキーパネルの`CoinShower`は消します。

アセットパネルの`CoinShower`をダブルクリックし、インスペクターパネルから下図のように値を変更します。
- `Preview`はシーンパネルで再生するかどうかの設定（ONでも良いです。）
- `Play On Load`はノードとして画面に登場したとき、すぐに再生するかどうかの設定。
- `Auto Remove On Finish`はパーティクルが終了したときに自動で破棄するかどうかの設定です。
<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/47d34690-8bf7-9bf0-200c-48426cb4602b.png">

## スクリプト(FishCollision.ts)の変更

1行目に、インポートするクラス名などを追加します。
```ts:FishCollision.ts(一部)
import { _decorator, /* 省略 */ Label, Animation, instantiate, Prefab } from 'cc';
```

新たにプロパティ`prefabCoinShower`を追加します。

```ts:FishCollision.ts(一部)
@property(Prefab)
prefabCoinShower: Prefab = null;
```

`onBeginContact`メソッドの、以下に示す部分を書き換えます。
```ts:FishCollision.ts(一部)
case CG.coin:
    // コインにヒットした場合
    this._score += 100;
    // パーティクルを追加
    this.node.addChild(instantiate(this.prefabCoinShower));
    break;
```

CocosCreator に戻り、ヒエラルキーパネルの`Fish`を選択します。
インスペクターパネルの`FishiCollision`コンポーネントの箇所に、`Prefab Coin Shower`が追加されているので、アセットパネルのプレハブ`CoinShower`をドラッグ＆ドロップで追加します。

<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/c0720269-c7f1-1b3e-cb21-1d5875041bd7.png">

## パーティクルの確認
デバグボタン(`Ctrl+P`)をクリックします。
コインを取った時の動きを確認しましょう。
<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/a7fa9b6c-0ca0-5276-659b-466691798808.png">


# パーティクルの詳細

`Custom`チェックボックスをONにすると詳細設定が可能です。
なお、同じ項目で2つ入力欄があるものは、その範囲内でランダムに値が出現するようです。

<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/6cd91209-5f23-5edb-cde9-2d9b5f00e6e5.png">

[https://docs.cocos.com/creator/manual/en/particle-system/2d-particle/2d-particle.html](https://docs.cocos.com/creator/manual/en/particle-system/2d-particle/2d-particle.html)

|英語|日本語|意味|
|:-|:-|:-|
| Total Particles | パーティクル総数 | パーティクルの最大数。 |
| Duration | 間隔 | 秒単位のパーティクル システムの持続時間。-1 は連続放出を意味します。 |
| Emission Rate | 排出率 | 1 秒あたりに放出されるパーティクルの数。 |
| Life | 寿命 | パーティクルの実行時間と範囲。 |
| Start/End Color | 色 | パーティクルの初期/最終カラー |
| Angle | 角度 | パーティクルの角度と範囲 |
| Start/End Size | サイズ | パーティクルの初期/最終サイズと範囲。 |
| Start/End Spin | スピン | パーティクルの初期/最終スピン角度と範囲。 |
| Pos Var | 位置変数 | エミッタ位置の範囲 (水平および垂直)。 |
| Position Type (Free / Relative / Grouped) | ポジションタイプ（フリー/関係/グループ） | パーティクル位置のタイプ。 |
| Emitter Mode (Gravity / Radius) | エミッターモード（重力/半径） |  |
| Gravity | 重力 | Emitter Mode がGRAVITYに設定されている場合にのみ機能します。 |
| Speed | スピード | 速度と範囲。Emitter Mode がGRAVITYに設定されている場合にのみ有効です。 |
| Tangential Accel | 接線加速度 | 各パーティクルの接線方向の加速度と範囲、つまり重力方向に垂直な加速度。Emitter Mode がGRAVITYに設定されている場合にのみ有効です。 |
| Radial Accel | 放射状の加速度 | 粒子の半径方向の加速度と範囲、つまり重力方向に平行な加速度。Emitter Mode がGRAVITYに設定されている場合にのみ有効です。 |
| Rotation Is Dir |  | 各パーティクルの回転がその方向に等しいかどうか。Emitter Mode がGRAVITYに設定されている場合にのみ有効です。 |
| Start/End Radius | 開始/終了半径 | 初期の半径と範囲。これは、発射時のエミッタに対するパーティクルの距離を示します。Emitter Mode がRADIUSに設定されている場合にのみ有効です。 |
| Rotate Per S | 回転角度/秒 | 1 秒あたりの初期点の周りのパーティクルの回転角度と範囲。Emitter Mode がRADIUSに設定されている場合にのみ有効です。 |