単一のコードで構成されたピクセルアート風エフェクトライブラリ（作者曰く、244 種類：炎、爆発、魔法、天気、UI、アイテム取得など）。Webゲームに直接組み込んだり、スプライトシートとして書き出したりできます。さらに、Claude Code用のスキルが付属しており、「下書き作成、レンダリング、画像確認、修正」というサイクルで新しいエフェクトの制作を支援します。
スター数 1361（+27 / 24時間）
理由
- 各エフェクトは依存関係のないJSファイルです。キャラクターが関わるエフェクトでは「演出」が行われます：構え、発動、ヒット時の静止画、復帰があり、ターゲットは被弾反応を示します。さらに、12 種類の完全な技によってエフェクトが一連の攻撃として構成されています。
- Webゲーム（canvas、Phaser、PixiJS、three.jsなど）ではコードを直接インポートできます。Godot、Unity、GameMakerなどでは、node tools/render.mjs <カテゴリ/エフェクト> --sheet を使用して、透明なPNGスプライトシートとAseprite形式のJSONを書き出します。
- 手法はHugo Duprez氏がClaudeを使ってピクセルエフェクトを作成した記事に由来し、一部のコードは彼のMITライセンスのエフェクトから改変されています。checkスクリプトは、範囲外への描画、継ぎ目、シードが設定されていない乱数、およびフレームレートの低下を検査します。
使い方
- スキル：/plugin marketplace add patch-gg/pixelfx を実行し、続いて /plugin install pixelfx@pixelfx を実行するか、skills/pixelfx を ~/.claude/skills/ にコピーします。その後、「魔法使いの必殺技にフロストノヴァを追加して」「炎と爆発のエフェクトをGodot用のスプライトシートとして書き出して」といった指示を直接与えます。
- ライブラリとして使用する場合：npm i github:patch-gg/pixelfx を実行します。自作する場合：node tools/new.mjs arcane/my-spell → node tools/render.mjs arcane/my-spell → node tools/check.mjs arcane/my-spell の順に実行します。オンラインギャラリーは patch-gg.github.io/pixelfx です。
リスク
- スキルにはClaude Codeへのインストール方法のみが記載されています。新しいエフェクトの制作には、モデルによる複数回のレンダリング、画像確認、修正が必要であり、その効果はモデルの画像認識能力に依存します。
- READMEにはコードとエフェクトがMITライセンスで商用利用可能と明記されていますが、GitHubではライセンスファイルが認識されていません。Patch Pixelフォントはライセンスの対象外です。リポジトリは10月30日に作成されました。