2018/3/20現在、マニュアルが未整備なので、exampleやソースコードからまとめました。

サンプルコード

以下のサンプルコードを示します。

var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#000',
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('spark', 'assets/particles/blue.png');
}

function create ()
{
    //  First create a particle manager
    //  A single manager can be responsible for multiple emitters
    //  The manager also controls which particle texture is used by _all_ emitter
    var particles = this.add.particles('spark');

    var emitter = particles.createEmitter();

    emitter.setPosition(400, 300);
    emitter.setSpeed(200);
    emitter.setBlendMode(Phaser.BlendModes.ADD);
}

パーティクルの生成

createメソッド内でthis.add.particlesメソッドにimageやspriteなどのオブジェクトを渡して生成します。

var particles = this.add.particles('spark');

これは、preloadでsparkのキーで読み込んだイメージを発生するパーティクルを生成して、ローカル変数particlesに代入しています。

発生(emit)

パーティクルオブジェクトを作成したら、続けて発生の設定をします。まずは生成したparticlesオブジェクトの関数createEmitter()を呼び出して、パーティクルの発生オブジェクトを生成します。

var emitter = particles.createEmitter();

発生パラメーターを引数で渡す

作成したemitterオブジェクトを使って、生成の仕方のパラメーターを設定します。

    emitter.setPosition(400, 300);
    emitter.setSpeed(200);
    emitter.setBlendMode(Phaser.BlendModes.ADD);

400×300の座標から、200ピクセル/秒の速度で、加算ブレンドするパーティクルを生成します。

生成方向やパーティクルの寿命、発生個数などは上記だと設定されておらず、なんらかのデフォルト値が利用されています。

発生パラメーターをオブジェクトで渡す

createEmitterメソッドの引数にパラメーターをオブジェクトで渡すこともできます。以下、加速度パーティクルの例からの抜粋です。

    particles.createEmitter({
        frame: { frames: [ 'red', 'blue', 'green', 'yellow' ], cycle: true },
        x: 64,
        y: { min: 500, max: 100, steps: 16 },
        lifespan: 4000,
        accelerationX: 200,
        scale: 0.4,
        frequency: 100
    });

ParticleEmitterクラス

Phaser3のGitHubリポジトリーのGameObjects -> Particles -> ParticleEmitter.jsより。

所属

Phaser.GameObjects.Particles

Components

• Components.BlendMode
• Components.ScrollFactor
• Components.Visible

生成時にオブジェクトで設定できるパラメーター

configオブジェクトで渡す際のパラメーター名、setter関数名、初期値のリストです。

accelerationX / accelerationY

• @type {number}
• 初期値： 0

加速度です。効果はgravityX/Yと同じです。

active

• @type {boolean}
• 初期値： true

パーティクルの発生の有効/無効を設定します。

alpha

• @type {float}
• 初期値： 1

元となるイメージの透過度を設定します。

angle

• @type {number} or {{min, max}}
• 初期値： {min: 0, max: 360}

radialがtrueだった時、パーティクルを生成する角度の最小角度と最大角度の度数設定です。minとmaxを要素にもつオブジェクトで指定するか、0〜360の度数をスカラーで与えるとその角度に対して、指定のspeedでパーティクルが射出されます。

blendMode

• @type {number} BlendModesで定義されている
• 初期値： BlendModes.NORMAL

パーティクルの描画方法を指定します。

• BlendModes.ADD: 加算
• BlendModes.NORMAL: 通常描画
• BlendModes.MULTIPLY: 乗算描画
• BlendModes.SCREEN:
• BlendModes.OVERLAY:
• BlendModes.DARKEN:
• BlendModes.LIGHTEN:
• BlendModes.COLOR_DODGE:
• BlendModes.COLOR_BURN:
• BlendModes.HARD_LIGHT:
• BlendModes.SOFT_LIGHT:
• BlendModes.DIFFERENCE:
• BlendModes.EXCLUSION:
• BlendModes.HUE:
• BlendModes.SATURATION:
• BlendModes.COLOR:
• BlendModes.LUMINOSITY:

bounce

• @type {number}
• 初期値： 0

跳ね返り係数です。

bounds

• @type {?Phaser.Geom.Rectangle}
• 初期値: null

bounds: { x: 250, y: 200, w: 350, h: 200 }のように指定すると、指定の範囲内でパーティクルが跳ね返るようになります。

collideTop, collideBottom, collideLeft, collideRightをfalseにすると、falseの方向では跳ね返らなくなります。

collideTop / collideBottom / collideLeft / collideRight

• @type {boolean}
• 初期値: true

boundsを設定した際に、これらのうちfalseが設定されている方向では跳ね返らなくなります。

currentFrame

• @type {number}
• 初期値： 0

複数のパターンを持ったゲームオブジェクトを利用している場合、現在の出力パターンを保持します。

deathCallback

• @type {?function}
• 初期値： null

パーティクルが消滅する際に呼ばれるコールバック関数を指定できます。

deathCallbackScope

• @type {?object}
• 初期値： null

deathCallbackの第１引数に渡すことができるパラメーターを指定できます。

deathZone

• type { Geometry Object}
• 初期値： null

deathZone: { type: 'onEnter', source: deathZone }などのように設定することで、deathZoneのGeometryと重なるパーティクルを消すことができます。

typeに'onLeave'を設定すると、指定のGeometryから外に出たパーティクルを消します。

delay

• @type {number}
• 初期値： 0

最初のパーティクルを発生させるまでに遅延させる時間をミリ秒で設定します。

emitCallback

• @type {?function}
• 初期値： null

パーティクルを発生させた時に呼び出すコールバック関数を設定できます。コールバックは、ParticleEmitterから以下のように呼び出されます。

this.emitCallback.call(this.emitCallbackScope, particle, this);

emitCallbackScope

• @type {?object}
• 初期値： null

emitCallbackを実行する時に第１引数に渡すオブジェクトです。コールバックの処理に必要なコンテクストを自由に渡せます。

emitZone

• @type {Geometry Object}
• 初期値： null

{source: Geometryオブジェクト}と設定することで、設定したGeometryの形状の場所からパーティクルを発生させることができます。

follow

• @type {?Phaser.GameObjects}
• 初期値： null

imageなどのゲームオブジェクトのインスタンスを渡すと、そのオブジェクトの座標からパーティクルを発生させるようになります。

followOffset

• @type {Phaser.Math.Vector2}
• 初期値： new Vector2()

followで指定したオブジェクトの座標から、ここで指定する座標だけずらした場所にパーティクルを発生させることができます。

followOffset: {x: -50, y: 150}やfollowOffset: new Phaser.Math.Vector2(-50,150)などをconfigオブジェクトに加えて設定できます。

frameQuantity

• @type {number}
• @default 1

同じフレームを何回出現させるかの設定です。例えば5を設定した場合、5つ同じフレームのパーティクルを発生させてから、次のフレームに切り替えて5つ出現するまでそれを出現させます。

frequency

• @type {number}
• 初期値： 0

パーティクルを発生させる周期をミリ秒単位で指定します。例えば1000を設定すると、1秒に1回だけ、パーティクルが発生します。0だと毎フレーム発生させます。

frames

• @type {Phaser.Textures.Frame[]}
• @default [defaultFrame]

パーティクルに利用するテクスチャーのフレーム情報です。指定しないと最初のフレームになります。

gravityX / gravityY

• @type {number}
• 初期値： 0

重力加速度です。効果はaccelerationX/Yと同じです。

lifespan

• @type {number}
• 初期値： 1000

パーティクルが発生してから消えるまでの時間をミリ秒単位で指定します。

maxParticles

• @type {number}
• 初期値： 0

パーティクルの最大生成数です。0を指定すると、上限なしになります。

maxVelocityX / maxVelocityY

• @type {number}
• 初期値： 10000

最高速度です。

moveToX / moveToY

• @type {number}
• 初期値： 0

この値を設定すると、パーティクルはlifespanの時間をかけて、このパラメーターに指定した座標に移動します。

name

• @type {string}
• @default ”

オブジェクトの名前を設定します。これは開発者が自由に利用できるパラメーターです。

on

• @type {boolean}
• 初期値： true

パーティクルを発生させるかどうかのフラグ。すでにこの値がtrueだったパーティクルに対してfalseを設定すると、すでに発生ずみのパーティクルに関しては動作を続けます。

particleBringToTop

• @type {boolean}
• 初期値： true

新しく発生したパーティクルをパーティクルリストの先頭に追加します。つまり、trueの場合は発生済みのパーティクルより、新しいパーティクルの方が手前に描画されます。

quantity

• @type {number}
• 初期値： 1

パーティクルを出現させる時に、同時にいくつ出現させるかの設定です。10を設定すると、パーティクルが発生する時に同時に10個発生させます。

このプロパティーはオブジェクトなので、直接値を設定することはできません。値を設定するときは、初期化時のオブジェクトか、setQuantity関数を利用してください。

randomFrame

• @type {boolean}
• 初期値： true

アニメーションフレームを持ったゲームオブジェクトを設定したパーティクルでこのパラメーターをtrueを設定した場合、パーティクルを発生させるたびにランダムでフレームが選択されます。

rotate

• @type {number}
• 初期値： 0

パーティクルの画像を指定の度数に回転させます。

scaleX / scaleY

• @type {float}
• 初期値： 1

各方向にパーティクルのイメージを拡大・縮小します。

speedX / speedY

• @type {number}
• 初期値： 0

radialがfalseだった時、パーティクルが発生した際の初期速度です。

timeScale

• @type {number}
• 初期値： 1

移動やアニメーションなどの経過時間の倍率です。

tint

• @type {integer}
• 初期値： 0xffffff

元のイメージにここで設定した色を重ねます。0xBBGGRRの並びです。

trackVisible

• @type {boolean}
• 初期値： false

followが設定されている時、これがtrueで、パーティクルのvisibleがfalseの場合、パーティクルのvisibleをtrueに設定します（本当にそういう用途なのかは不明)。

visible

• @type {boolean}
• 初期値： true

パーティクルを描画するかの設定です。

x / y

• @type {number}
• 初期値： 0

パーティクルを発生させる座標です。

補足

 

 

radial

• @type {boolean}
• 初期値： true

この値がtrueの時、minとmaxの間の角度でランダムにパーティクルを生成します。生成されるパーティクルの速度はspeedで設定したものになります。

この値がfalseの時は、パーティクルはspeedXとspeedYの値の速度で発生します。

設定メソッド

fromJSON

• @param {object} config

設定が入っているオブジェクトを渡してパラメーターを設定します。configFastMapとconfigOpMapに定義されているキーを引数から読み込んで、関連パラメーターを設定します。

toJSON

• @param {object} output
• 初期値： null
• @return {object}

現在の設定を引数のオブジェクトに追加して返します。

speedYが未設定の時は、speedXの値をspeedとして返します。scaleYも同様です。

startFollow(target, offsetX, offsetY, trackVisible)

• 引数
  • target {Phaser.GameObjects}
    • 追いかけるオブジェクトのインスタンス
  • offsetX / offsetY {number}
    • オフセット座標
  • trackVisible {boolean}
    • 表示を設定するかのフラグ
• 戻り値
  • {Phaser.GameObjects.Particles.ParticleEmitter}

指定するゲームオブジェクトの座標からパーティクルを発生させるようにします。設定したエミッターオブジェクトを戻します。

stopFollow

• 戻り値
  • {Phaser.GameObjects.Particles.ParticleEmitter}

オブジェクトを追うのを停止します。

getFrame

• 戻り値
  • {Phaser.Textures.Frame}

次に出現させるパーティクルのテクスチャーフレームを返します。

setFrame: function (frames, pickRandom, quantity)

• 引数
  • {array|string|integer|object} frames
    • パーティクルのイメージで利用する一つ、あるいは配列でのフレーム情報を設定します
  • {boolean} [pickRandom=true]
    • framesで指定したイメージをランダムに出現させる時にtrueを設定します
  • {integer} [quantity=1]
    • 同じフレームを繰り返す数を指定します
• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

setRadial: function (value)

• 引数
  • {boolean} value
    • radialに設定する値
• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

radialの値を設定します。

setPosition: function (x, y)

• 引数
  • {number} x, y
    • パーティクルを発生させる座標です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

xとyの値を設定して、onChangeイベントを発生させます。

setBounds: function (x, y, width, height)

• 引数
  • {number|object} x
    • パーティクルが跳ね返る範囲を指定します
  • {number} y, width, height

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

boundsに跳ね返る範囲を設定します。

setSpeedX: function (value)

• 引数
  • {number} value
    • speedXに設定する値を指定します

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

speedXに指定の値を設定して、onChangeを呼び出します。この値が設定された場合、radialは無効になるのでfalseを設定します。

setSpeedY: function (value)

• 引数
  • {number} value
    • speedYに設定する値を指定します

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

speedYに指定の値を設定して、onChangeを呼び出します。この値が設定された場合、radialは無効になるのでfalseを設定します。

setSpeed: function (value)

• 引数
  • {number} value
    • speedに設定する値です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

speedパラメーターに値を設定して、onChangeを呼び出します。また、radialをtrueにします。

setScaleX: function (value)

• 引数
  • {number} value
    • scaleXに値を設定します

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

scaleXに値を設定して、onChangeを呼び出します。

setScaleY: function (value)

• 引数
  • {number} value
    • scaleYに値を設定します

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

scaleYに値を設定して、onChangeを呼び出します。

setScale: function (value)

• 引数
  • {number} value
    • Scaleに設定する値です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

Scaleに値を設定して、onChangeを呼び出します。これで設定した場合は幅と高さの双方にこの値が適用されます。

setGravityX: function (value)

• 引数
  • {number} value
    • gravityXに設定する値です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

gravityXに値を設定します。

setGravityY: function (value)

• 引数
  • {number} value
    • gravityYに設定する値です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

gravityYに値を設定します。

setGravity: function (x, y)

• 引数
  • {number} x
  • {number} y
    • gravityXとgravityYに値を設定します

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

gravityXとYに同時に値を設定します。

setAlpha: function (value)

• 引数
  • {float} value
    • alphaに値を設定します

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

alphaに値を設定して、onChangeを呼び出します。

setEmitterAngle: function (value)

• 引数
  • {number} value
    • angleに設定する値です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

angleに値を設定して、onChangeを呼び出します。

setAngle: function (value)

• 引数
  • {number} value
    • angleに設定する値です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

angleに値を設定して、onChangeを呼び出します。

setEmitterAngleと同じ内容です。

setLifespan: function (value)

• 引数
  • {number} value
    • lifespanに設定する値です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

lifespanに値を設定して、onChangeを呼び出します。

setQuantity: function (quantity)

• 引数
  • {integer} quantity
    • quantityに設定する値です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

quantityに値を設定して、onChangeを呼び出します。

setFrequency: function (frequency, quantity)

• 引数
  • {number} frequency
    • frequencyに設定する値です
  • {integer} [quantity]
    • quantityに設定する値です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

frequentyに値を設定して、発生数を0にして、quantityに値を設定してonChangeを呼び出します。

setEmitZone: function (zoneConfig)

• 引数
  • {object} [zoneConfig]
    • getPoint関数をもつオブジェクトを指定します
    • 省略すると無効にemitZoneの利用を終えます
    • 以下、パラメーターです
      • {string} type: 出現のさせ方
        • random or edge
      • {object} source: Geometryなどの座標指定です
        • sourceはgetPoint関数をもつオブジェクトの必要があります
      • {number} quantity: 同時出現個数
        • typeがedgeの時のみ有効です
      • {number} stepRate:
        • typeがedgeの時のみ有効です
      • {boolean} yoyo
        • typeがedgeの時のみ有効です。初期値はfalseです
      • {boolean} seamless
        • typeがedgeの時のみ有効です。初期値はtrueです

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

パーティクルを出現させる範囲をgetPoint関数をもつオブジェクトで指定します。

setDeathZone: function (zoneConfig)

• 引数
  • {object} [zoneConfig]
    • {string} type: ‘onEnter’か’onLeave’を設定
    • {object} source
      • GeomeryのLineやCircleのようにcontains関数をもつオブジェクトを渡します

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

パーティクルを削除する範囲を設定します。

reserve: function (particleCount)

• 引数
  • {integer} particleCount
    • 内部的に生成しておくパーティクルの数です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

事前にパーティクルをまとめて生成して置いて、ランタイム時にメモリーを確保するのを避けます。生成したパーティクルはdeadにストックされます。

getAliveParticleCount: function ()

• 戻り値
  • {integer}
    • 現在発生しているパーティクル数

現在発生中のパーティクルの数を返します。

getDeadParticleCount: function ()

• 戻り値
  • {integer}
    • 現在、利用していないパーティクルの数を返します

reserveで生成していたり、lifespanを終えて動作を停止したパーティクルの数を返します。

getParticleCount: function ()

• 戻り値
  • {integer}
    • 全てのパーティクルの数を返します

有効なパーティクルと、停止しているパーティクルの合計数を返します。

atLimit: function ()

• 戻り値
  • {boolean}
    • パーティクルが上限に達しているとtrueを返します

パーティクルを生成した数がmaxParticlesに達していたらtrueを返します。上限がなかったり、上限数に達していない時はfalseを返します。

onParticleEmit: function (callback, context)

• 引数
  • {function} callback
    • パーティクルを設定した時に呼び出す関数です
  • {any} [context]
    • コールバック関数に渡すデータオブジェクトです

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

パーティクルを発生させた時に呼び出したい関数を設定します。引数を省略すると、設定済みのコールバックを削除します。

onParticleDeath: function (callback, context)

• 引数
  • {function} callback
    • パーティクルが停止する時に呼び出す関数です
  • {any} [context]
    • コールバック関数に渡すデータオブジェクトです

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

パーティクルが停止する時に呼び出したい関数を設定します。引数を省略すると、設定済みのコールバックを削除します。

killAll: function ()

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

動作中の全てのパーティクルを停止させます。

forEachAlive: function (callback, thisArg)

• 引数
  • {function} callback
    • 呼び出す関数です
  • {any} thisArg
    • 関数に渡すパラメーターです

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

動作中のパーティクルを引数にして、callback関数を呼び出していきます。callback関数は以下のように引数が渡されます。

• callback(thisArg, particle, emitter)
  • {any} thisArg
    • thisArgが渡されます
  • {object} particle
    • 動作中のパーティクルのインスタンス
  • emitter
    • thisが渡されます

forEachDead: function (callback, thisArg)

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

停止中のパーティクルに対して、forEachAliveと同様に利用できる関数です。

start: function ()

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

onをtrueにして、カウンターを0にして、パーティクルの発生を開始します。

pause: function ()

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

activeをfalseにして、パーティクルの発生を停止します。

resume function()

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

activeをtrueにして、パーティクルの発生を再開します。

depthSort: function ()

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

動作中のパーティクルをStableSortします。

flow: function (frequency, count)

• 引数
  • {number} frequency
    • frequencyに設定する値です
  • {integer} [count=1]
    • quantityに設定する値です

• 戻り値
  • @return {Phaser.GameObjects.Particles.ParticleEmitter}
    • このエミッターのインスタンスを返します

frequencyとquantityに値を設定して、quantityのonChangeを呼び出したらstart()でパーティクルを返します。

explode: function (count, x, y)

• 引数
  • {integer} count
    • 発生させるパーティクル数
  • {number} x
    • パーティクルを発生させるX座標
  • {number} y
    • パーティクルを発生させるY座標

• 戻り値
  • @return {Phaser.GameObjects.Particles.Particle}
    • 最後に発生させたパーティクルのインスタンスを返します

countで指定した数のパーティクルを座標を指定して発生させます。frequencyには-1を設定して、まとめて出現させるようにします。

emitParticleAt: function (x, y, count)

• 引数
  • {number} x
    • パーティクルを発生させるX座標
  • {number} y
    • パーティクルを発生させるY座標
  • {integer} count
    • 発生させるパーティクル数

• 戻り値
  • @return {Phaser.GameObjects.Particles.Particle}
    • 最後に発生させたパーティクルのインスタンスを返します

指定の数のパーティクルを指定の座標に出現させます。explodeと違い、frequencyは保持されます。

emitParticle: function (count, x, y)

• 引数
  • {integer} count
    • 発生させるパーティクル数
    • 省略するとquantityの値
  • {number} x
    • パーティクルを発生させるX座標
  • {number} y
    • パーティクルを発生させるY座標

• 戻り値
  • @return {Phaser.GameObjects.Particles.Particle}
    • 最後に発生させたパーティクルのインスタンスを返します

指定の数のパーティクルを、指定の座標から実際に出現させます。deadから生成して、足りない分は新規に作成します。

参考URL

• Particle Emitterの例
• Phaser3のGitHubリポジトリー