ページ一覧

Cocos Creator 3 導入編

Cocos Creator 3 カンタン2Dゲーム制作

パーティクルの作成

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

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

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に設定されている場合にのみ有効です。