1. トップ
  2. 作品一覧
  3. エフェクト工房
✨エフェクト工房のプレイ画面
ツール公開中無料・インストール不要

エフェクト工房

GAME EFFECT & STREAM FX MAKER

ヒット・爆発・魔法・花火などのエフェクトを、ブラウザだけで作れる無料ツールです。41種類の作例から選んで調整し、ブラウザゲーム用のJavaScriptや、OBSで使う配信演出として書き出せます。わんコメ用のテンプレートにすれば、コメントやギフトに反応して自動で演出を再生できます。

▶ 使ってみる

ブラウザでそのまま動きます。スマホ・タブレット・PC対応。

どんなツール?

エフェクト工房は、ゲームの「手応え」を作るエフェクトをブラウザの中で作るツールです。攻撃が当たったときの火花や、レベルアップの光、パズルの連鎖など、画面を気持ちよくする演出を、絵を描かずに作れます。

1つのエフェクトは、粒子・衝撃波の輪・光・画面の揺れなどの「部品」を重ねてできています。部品を少しずつ重ねると、少ない粒でも強い手応えが出ます。

部品を重ねるほど、1つのヒットの手応えが強くなります

インストールや会員登録は必要ありません。作業内容は使っているブラウザの中に保存され、サーバーに送られることはありません。

使い方

  1. 左の「作例から始める」から、作りたいものに近い作例を選びます。プレビューを押すと、押した場所でエフェクトが再生されます。
  2. 右の「全体をまとめて調整」で、大きさ・速さ・粒の量・色合いを合わせます。迷ったら「おまかせ変化」で、少しずつ違う動きを試せます。
  3. さらに詰めたいときは、下のタイムラインで部品の名前を選び、形や色、寿命などを細かく変えます。棒を左右に動かすと、部品が始まるタイミングを変えられます。
  4. 「書き出し」を開き、「ゲーム用」か「配信用」を選んで、ファイルに保存するかコードをコピーします。

「10連発」でたくさん同時に再生して、重くならないかを確かめられます。「連鎖の強さ」を動かすと、連鎖数に合わせて粒の数や大きさが増える様子を確認できます。スマホでは、プレビューの下の「作例」「調整」「書き出し」を切り替えて使います。

41種類の作例

ジャンル作例
攻撃・被弾ヒット・クリティカル・斬撃・爆発・ダメージ数字・ガード・回避・MISS・銃撃・連続ヒット・貫通・撃破・消滅
属性・魔法溜め→解放・炎・氷・雷・毒・魔法陣・光線
移動・環境土煙・ワープ・水しぶき・雨・雪・桜吹雪・火の粉
状態回復・強化・シールド・オーラ・スタン・準備完了
UI・報酬パズル消去・連鎖・コイン獲得・レベルアップ・タップ・紙吹雪・達成スタンプ・宝箱・ガチャ・花火・勝利

10種類の部品

粒子
火花・煙・紙吹雪・雨など。形や発生する範囲を変えると、いろいろな表現に使えます。
衝撃波の輪
着弾の広がり。角の数を変えると、魔法陣のような形にもなります。
光・画面フラッシュ
その場で光らせるか、画面全体を一瞬明るくします。
斬撃・稲妻
剣の軌跡や、枝分かれする雷を描きます。
文字・数字
「CRITICAL!」やダメージの数字など。再生するときに文字を差し替えられます。
連番画像
自分で用意した画像を、パラパラ漫画のように切り替えて表示します。
画面の揺れ・ヒットストップ・的のリアクション
画面を揺らす、一瞬止める、当たった相手を白く光らせてのけぞらせる、の3つで、当たった感じを強めます。

弱い攻撃は控えめに、クリティカルだけ揺れを大きくするなど、強さによって差をつけると、違いがはっきり伝わります。

書き出し

用途形式使いどころ
ゲーム用JavaScript/ES Moduleブラウザゲームに組み込む。ほかのライブラリなしで動きます
ゲーム用確認用HTML書き出したエフェクトを、ブラウザでそのまま試す
ゲーム用Unity(試作)粒子だけをUnityのParticle Systemに変換する
配信用OBS用HTMLOBSのブラウザソースに読み込み、操作パネルのボタンで再生する
配信用わんコメ用コメントやギフトに反応して、自動で再生する
配信用透過WebM背景が透明な動画にして、OBSのメディアソースや動画編集で使う
1つのエフェクトを、ゲーム用にも配信用にも書き出せます

「保存データ」で作業内容をファイルに残しておけば、別のパソコンでも続きを編集できます。組み込み方の詳しい説明とコード例は、ツールの中の「ゲームに組み込む」「OBSで使う」のページにまとめています。

配信で使う(わんコメ連携)

わんコメ用に書き出すと、「この言葉を含むコメント」「ギフト・投げ銭」などの条件に合ったときに、配信画面で自動でエフェクトを再生できます。視聴者の名前やコメント本文を、エフェクトの文字として表示することもできます。

条件に合ったコメントやギフトが来ると、配信画面で自動で演出が再生されます

名前やコメントを画面に出すときは、不適切な言葉がそのまま映らないように「反応しない言葉」を登録し、文字数の上限も短めにしてください。連投で演出が重なりすぎないよう、「次に反応するまで」の秒数も決められます。

無料版で設定できるコメントの条件は3つまでです。エフェクト工房は、わんコメに対応した非公式の制作物です。わんコメの運営元が提供するものではありません。

これからの予定

わんコメで遊べる配信用ゲーム「コメブレイカー」の紹介ページを公開しました。視聴者が「攻撃」「魔法」「回復」「防御」や自分で考えた技名をコメントして、みんなでボスを倒すゲームです。2026年11月8日(日)21時から、無料版(ボス4体)と有料版(ボス全22体)をBOOTHで配布します。エフェクト工房と同じく、わんコメに対応した非公式の制作物です。

また、コメントの条件を数の制限なく設定できるエフェクト工房の有料版も準備中です。こちらもBOOTHで販売する予定です。公開したら、このページとX(@Tab1984_diy)でお知らせします。

利用ルール

  • ツールで作ったエフェクトは、ゲーム・配信・動画に使えます。商用利用もできます。
  • クレジット表記は必須ではありません。書く場合は「エフェクト工房 / TAB-1984」としてください。
  • ツール本体や書き出したファイルを、素材集やテンプレートとして再配布・販売することはできません。ゲームや配信に組み込んで使う場合は問題ありません。
  • 利用によって生じた損害について、制作者は責任を負いません。

よくある質問

料金はかかりますか?

無料で使えます。インストールや登録も不要です。

スマホでも使えますか?

使えます。プレビューの下の「作例」「調整」「書き出し」を切り替えて操作します。細かい調整はパソコンのほうが快適です。

白い背景だと光が見えません

光の部品は色を足して明るくする重ね方のため、明るい背景では目立ちません。部品の「重ね方」を「通常」に変えてください。

動作が重いときは?

プレビューの左上に、粒の数と動作のなめらかさが表示されます。「粒の量」を下げるか、粒の寿命を短くすると軽くなります。

作ったエフェクトはどこに残りますか?

使っているブラウザの中に自動で保存されます。ブラウザのデータを消すと失われることがあるので、大事なものは書き出しの「保存データ」で控えを残してください。

説明を読んだら、さっそく使ってみてください。

▶ エフェクト工房を開く

ほかの作品