ページ一覧
Cocos Creator 3 導入編
Cocos Creator 3 カンタン2Dゲーム制作
- プロジェクト作成と画面の説明
- (1)【トゥイーンの使い方】
- (2)【プレハブの使い方】
- (3)【衝突判定（コライダの使い方）】
- (4)【アニメーションクリップの使い方】
- (5)【パーティクルの使い方】← 本記事
- (6)【ラベルアトラスの使い方】
パーティクルの作成
ここではパーティクルという機能を使って、魚がコインを取ったときの演出を追加します。
パーティクルをプレハブ化し、コインを取るごとに画面に追加します。
パーティクルファイルの追加
ScriptフォルダからどれでもいいのでスクリプトをVSCodeで開きます。
VSCodeが立ち上がたら、Imagesフォルダに新しくファイルを作り、名前をCoinShower.plistとします。以下の内容を記述します。
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はパーティクルが終了したときに自動で破棄するかどうかの設定です。
スクリプト(FishCollision.ts)の変更
1行目に、インポートするクラス名などを追加します。
FishCollision.ts(一部)
import { _decorator, /* 省略 */ Label, Animation, instantiate, Prefab } from 'cc';
新たにプロパティprefabCoinShowerを追加します。
FishCollision.ts(一部)
@property(Prefab)
prefabCoinShower: Prefab = null;
onBeginContactメソッドの、以下に示す部分を書き換えます。
FishCollision.ts(一部)
case CG.coin:
// コインにヒットした場合
this._score += 100;
// パーティクルを追加
this.node.addChild(instantiate(this.prefabCoinShower));
break;
CocosCreator に戻り、ヒエラルキーパネルのFishを選択します。
インスペクターパネルのFishiCollisionコンポーネントの箇所に、Prefab Coin Showerが追加されているので、アセットパネルのプレハブCoinShowerをドラッグ＆ドロップで追加します。
パーティクルの確認
デバグボタン(Ctrl+P)をクリックします。
コインを取った時の動きを確認しましょう。
パーティクルの詳細
CustomチェックボックスをONにすると詳細設定が可能です。
なお、同じ項目で2つ入力欄があるものは、その範囲内でランダムに値が出現するようです。
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に設定されている場合にのみ有効です。 |