patch-gg/pixelfx

これは何？

主な機能

• 01炎、氷、天候、UIなど、20カテゴリにわたる232種類のエフェクトを収録。
• 02依存関係なしでブラウザーゲームから直接実行可能。
• 03ほかのエンジン向けに、Aseprite形式のJSONを含む透明背景のスプライトシートをエクスポート。
• 04カスタムカラーパレットに対応し、コードを編集せずにエフェクトの色を変更可能。
• 05エフェクトの検索、エクスポート、作成を支援するClaude Code skillを提供。
• 06シード付きの乱数から決定論的なフレームを生成。

ユースケース

• 2Dブラウザーゲームに、ヒット、呪文、アイテム取得のエフェクトを追加する。
• 爆発や炎のアニメーションをスプライトシートとしてGodotやUnity向けにエクスポートする。
• Claude CodeでAIアシスタントを使い、新しいピクセルアートエフェクトを試作する。
• 既存のエフェクトの色を変更し、たとえば炎を青い炎にして、別のキャラクターやテーマに合わせる。

クイックスタート

1. 1

   GitHubからプロジェクトにインストールする

   npm i github:patch-gg/pixelfx
2. 2

   エフェクトのスプライトシートをレンダリングする

   node tools/render.mjs ice/frost-nova --sheet

使う前に知っておきたいこと

• !JavaScriptのCanvasとブラウザーゲーム向けです。他のエンジンでは、エクスポートしたスプライトシートが必要です。
• !gallery/fontsにあるPatch Pixelフォントは、MITライセンスの対象外です。

収録されている特集

トピック

よくある質問

pixelfx とは？

232種類のピクセルアートエフェクトを小さなJavaScriptモジュールとして収録し、新しいエフェクトの制作を支援するClaude Code skillも備えたライブラリ。 pixelfxは、232種類のピクセルアートエフェクトとアニメーションを集めたライブラリです。それぞれが小さなJavaScriptコードで実装されています。カテゴリには、炎、爆発、水、氷、雷、魔法、天候、近接攻撃、アイテム取得、状態異常、UIフィードバックなどがあります。ライブギャラリーでプレビューできるほか、カスタムパレットで色を変更したり、反転・回転したりできます。

pixelfx は無料で使えますか？ライセンスは？

pixelfx は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

pixelfx は今もメンテナンスされていますか？

活発にメンテナンス中。pixelfx の最終コミットは 2026年10月31日 です。

pixelfx は何に使えますか？

2Dブラウザーゲームに、ヒット、呪文、アイテム取得のエフェクトを追加する。 爆発や炎のアニメーションをスプライトシートとしてGodotやUnity向けにエクスポートする。 Claude CodeでAIアシスタントを使い、新しいピクセルアートエフェクトを試作する。 既存のエフェクトの色を変更し、たとえば炎を青い炎にして、別のキャラクターやテーマに合わせる。

pixelfx のインストール方法は？

GitHubからプロジェクトにインストールする: npm i github:patch-gg/pixelfx エフェクトのスプライトシートをレンダリングする: node tools/render.mjs ice/frost-nova --sheet

pixelfx はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/patch-gg/pixelfx