ブラウザゲームに組み込む

書き出したJavaScriptファイルは、他のライブラリなしで動きます。下のデモは、この方法で実際に組み込んだものです。同じ色がつながったマスを押して消してみてください。

同じ色が2つ以上つながったマスを押してください。

最短の組み込み方

書き出し画面で「ゲーム用」の「JavaScript」を選び、effects.jsとして保存します。ゲーム画面の要素に重ねると、更新と描画は自動で行われます。

<div id="game">…</div>
<script src="effects.js"></script>
<script>
const fx = GameFX.overlay(document.querySelector('#game'));
fx.play('hit', 200, 150);
</script>

hitの部分は、ツールの「コードでの呼び名」です。座標は重ねた要素の左上が基準です。

再生時のオプション

名前	内容	例
`power`	連鎖数などの強さ。粒の数や大きさが増えます	`5`
`scale`	大きさの倍率	`1.5`
`text`	文字部品の内容を差し替えます	`'999'`
`rotation`	向きを度で指定します	`90`
`target`	的のリアクションを適用する要素です	`enemyEl`
`loop`	雨やオーラなどを続けて再生します	`true`
`onend`	再生が終わったときに呼ぶ関数です	`() => next()`

const rain = fx.play('rain', 480, 0, { loop: true });
fx.stop(rain); // 出ている粒は自然に消えます

自前のゲームループに入れる

Canvasのゲームでは、ゲームの描画に続けてエフェクトを描くと、揺れやヒットストップも扱えます。

const fx = new GameFX();

function frame(dt) {
  if (fx.hitStop <= 0) updateGame(dt); // ヒットストップ中はゲームを止める
  fx.update(dt);

  ctx.save();
  ctx.translate(fx.shakeX, fx.shakeY); // 画面の揺れ
  drawGame(ctx);
  fx.draw(ctx);
  ctx.restore();
}

ES Moduleで読み込む

書き出し形式で「ES Module」を選ぶと、importで読み込めます。

import GameFX from './effects.mjs';

パズルの連鎖に使う例

連鎖数をpowerとtextに渡すと、同じエフェクトのまま連鎖に応じて派手になります。

fx.play('chain', x, y, { power: chain, text: chain + ' CHAIN!' });

軽く動かすために

書き出したファイルには、使っている部品の処理だけが入ります。作成中の一覧に残っている不要なエフェクトは、削除してから書き出してください。同時に出せる粒の上限はnew GameFX({ maxParticles: 2000 })のように変更できます。スマホ向けなら少なめの設定をおすすめします。