fire/campfire雰囲気：たき火と環境ループ
たき火はキャンプ、チェックポイント、安全地帯に使えます。重要な命中演出より明るさを抑え、シーンが非アクティブなら更新を止めましょう。他の天候や背景表現は公式カタログにあります。
制作者向けリソース / ピクセルアート
PixelFX 生成ツール：ゲーム向けピクセルエフェクト
Patch の PixelFX は、炎や魔法、アイテム取得などをコードで描くアニメーションライブラリです。確認したバージョンの公式カタログには 244 種類が掲載されています。編集可能な JavaScript なので、AI に修正、描画、改善を依頼できます。PixelFX が担うのは視覚的な反応で、ゲームのルールは自分のプロジェクトで管理します。
確認日：2026 年 11 月 5 日 · リビジョン a841596
JavaScriptCanvasPNG + JSONMIT
PIXELFX / LIVE CANVAS
本物の PixelFX エフェクトを 3 種類試す
オリジナルのコードをブラウザー内で実行します。色と速度を調整し、再生を押してください。単発エフェクトは終了時に停止します。キャラクターの演技は含みません。
元のピクセルサイズで 20 FPS、選択した色と速度を反映して出力します。両ファイルを保存してください。JSON には時間、基準点、MIT 表記を含みます。キャラクター動作は含みません。
PixelFX エフェクト生成ツール：使えるスプライトシートを作る
3 種類のエフェクトから選び、色と速度を設定すると、透明スプライトシートとメタデータをブラウザー内で生成できます。アカウントやクレジットは不要です。既存コードの描画ツールなので、新しいエフェクトはソースを編集し、ゲーム全体は Studio で作ります。
ゲーム内の役割で PixelFX を選ぶ
まずプレイヤーに伝えたいイベントを決めましょう。派手な表現は敵や報酬を隠すことがあります。次の 3 つの用途を、実際の背景やキャラクターの大きさと比較してください。
ice/frost-nova戦闘：フロストノヴァとスキル
発動、ダメージ、硬直終了の時点を決めてから描画を調整します。見える氷の輪が衝突判定、ダメージ、クールダウンを実装するわけではありません。ゲームロジック側でタイミングを合わせてください。
pickups/collect-burst報酬：取得バースト
アイテム取得が確定したら、その位置で collect burst を再生します。加点は一度だけ行い、終了した演出は削除します。同時取得でプレイヤーが隠れるなら、同時エフェクト数や明るさを抑えましょう。
PixelFX をゲームに組み込む 4 ステップ
小さなループを計画します。例えば一部屋で移動し、水晶を 5 個集め、勝利後に再開します。キーボードかタッチかを決めます。
各演出にイベントを割り当てます。たき火は背景、バーストは取得、ノヴァはスキル。雰囲気、成功、危険を区別します。
Studio で企画するか、自分のプロジェクトでサンプルを使います。ソースや出力素材を渡してください。リンクだけではライブラリを取り込んだ証拠になりません。
一周遊び、連続取得と再開を確認します。明暗両方の背景で透明な縁、基準点、スマートフォンの見やすさを確認し、変更前に動く版を保存します。
ブラウザーゲームで PixelFX を使う
Vite などの ESM バンドラーを使う JavaScript プロジェクトにインストールします。サンプルは Canvas を作成し、クリックやタップでエフェクトを再生します。既存ゲームでは透明なレイヤーに描画し、確定したゲームイベントから起動します。ダメージ、衝突、得点はゲームロジックで管理します。
npm install github:patch-gg/pixelfx#a84159688af3ca37a4be05a0d422b94451b2e24eJavaScript / Canvas
import { createFrame, clearFrame, createFx, composite } from 'pixelfx';
import * as burst from 'pixelfx/fx/pickups/collect-burst';
const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 180;
canvas.style.cssText = 'width:640px;max-width:100%;image-rendering:pixelated;background:#111';
document.body.append(canvas);
const ctx = canvas.getContext('2d');
const frame = createFrame(320, 180);
const pixels = ctx.createImageData(320, 180);
let fx;
canvas.addEventListener('pointerdown', () => {
fx = createFx(burst, { x: 160, y: 120, seed: 3 });
});
let previous;
function tick(now) {
const dt = previous === undefined ? 0 : Math.min((now - previous) / 1000, 0.05);
previous = now;
clearFrame(frame);
if (fx) {
fx.update(dt);
fx.draw(frame);
if (fx.done()) fx = undefined;
}
composite(frame, pixels.data);
ctx.putImageData(pixels, 0, 0);
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);PixelFX のスプライトシートを書き出す
リポジトリを複製してツールをインストールし、エフェクトを描画します。透明な PNG アトラスと、フレーム時間や基準点を含む Aseprite 形式の JSON が生成されます。対応インポーターを使ってください。PNG だけでは時間や基準点は反映されません。描画ツールの動作条件は公式ガイドを参照してください。
git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
git checkout a84159688af3ca37a4be05a0d422b94451b2e24e
npm install
node tools/render.mjs ice/frost-nova --sheetAI で PixelFX をカスタマイズする
公式リポジトリには Claude Code 用プラグインがあります。Claude Code 内で次の 2 つのコマンドを実行します。他のアシスタントには対象ソースと以下の指示を渡してください。このページは Studio にプラグインをインストールせず、GitHub からの自動取り込みも保証しません。
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx既存のブラウザーゲームに PixelFX の collect-burst を追加してください。操作、得点、衝突判定は維持します。アイテム取得時に一度だけ、固定シードと青いパレットで再生してください。透明レイヤーに描き、終了時に削除し、リスタート時に全エフェクトを消してください。MIT 表記を残してください。変更ファイルと、再生、同時取得、モバイル性能の確認方法を示してください。ソースがなければ API を推測せず、ファイルを求めてください。
ゲーム内でエフェクトを確認する
背景に合わせて色を、命中のタイミングに合わせて速度を調整し、固定シードで比較します。同時再生、リスタート時の後処理、小画面での見やすさを確認しましょう。動きを減らす設定にも配慮してください。美しいプレビューだけではゲームへの適合性や処理性能は保証できません。
PixelFX 生成ツールのよくある質問
AI ピクセルアート生成器ですか？
既存の 3 種類の手続き型エフェクトを描画します。画像モデルは使わず、文章から新しいアニメーションを作るものではありません。PixelFX には別途 Claude Code 用 skill があり、Studio は AI ゲーム生成器です。
PNG と JSON はどう使いますか？
同じフォルダーに保存してください。PNG はフレームの格子、JSON は領域、時間、基準点を定義します。対応インポーターか自分のコードで読み込みます。テクスチャの平滑化を無効にし、基準点が合っているか確認してください。
光や暗い縁の見え方が違うのはなぜですか？
PixelFX は色と加算光を合成します。透明 PNG は結果を RGBA に焼き込むため、シーンでのリアルタイム加算描画と異なる場合があります。実際の背景で比較してから合成方法を選びましょう。キャラクターのポーズは出力しません。
ゲーム全体を生成できますか？
このツールは視覚素材を出力します。ゲームは Studio で目標と操作を説明し、企画を確認してください。ログイン後の企画は無料で、生成と修正には Studio Credits が必要です。PixelFX の自動インストールや全エンジンでの検証を保証するものではありません。
PixelFX のライセンスとクレジット
コードとエフェクトは MIT ライセンスです。再配布時は著作権と許諾の表記、および該当する Hugo Duprez と Hollow Crown の表記を残してください。gallery/fonts の Patch Pixel フォントは対象外で、このページでは使用していません。PixelFX の管理者は Patch で、本ページは独立した導入ガイドです。
公式情報
OpenGame / 確認日：2026 年 11 月 5 日 · リビジョン a841596