pixelfx : 244 effets pixel art gratuits pour ton jeu et la skill Claude Code qui crée les tiens

Claude fait déjà des effets pixel art pour ton jeu. Et pas besoin de partir de zéro : pixelfx est un pack gratuit de 244 effets (feu, explosions, éclairs, magie, pluie… jusqu’aux pièces et aux coffres) avec une skill Claude Code qui crée ceux qui te manquent.

Le meilleur : aucun n’est une image. Chaque effet est un petit bout de code, donc tu changes sa couleur, tu le retournes et tu l’intègres à ton jeu.

Qu’est-ce que pixelfx

• Repo : patch-gg/pixelfx, par Patch.
• Licence MIT : gratuit, y compris pour les jeux commerciaux.
• Près de 6 000 étoiles sur GitHub (5 982 au 8 novembre 2026).
• 244 effets répartis en 21 catégories : attaques complètes, feu, explosions, eau, glace, éclairs, science-fiction, corps à corps, impacts, projectiles, apparition et mort, arcane, sacré, ombre, états, nature, météo, interface, objets, transitions et bestioles.
• Méthode de Hugo Duprez : le code est de l’argile, fie-toi à tes yeux et donne-lui des références.

1 · Découvre-les en direct

Ouvre la galerie et amuse-toi avec. Le catalogue complet se trouve dans docs/CATALOG.md du repo.

2 · Dans un jeu web (canvas, Phaser, PixiJS, Kaplay, three.js)

Installe-le depuis GitHub (aucune dépendance) :

npm i github:patch-gg/pixelfx

Et utilise-le dans ta boucle de jeu :

import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";

const frame = createFrame(320, 180);     // la résolution en pixels de ton jeu
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });

function tick(dt) {
  fx.update(dt);
  clearFrame(frame);
  fx.draw(frame, "back");    // derrière les personnages
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);
  ctx.putImageData(img, 0, 0); // mise à l’échelle avec image-rendering: pixelated
}

3 · Dans Godot, Unity, GameMaker, Defold, LÖVE ou Bevy

Exporte des sprite sheets :

git clone https://github.com/patch-gg/pixelfx && cd pixelfx && npm install
node tools/render.mjs ice/frost-nova --sheet   # PNG transparent + JSON au format Aseprite
node tools/sheets.mjs                          # exporte toute la bibliothèque dans sheets/

Le JSON contient les rectangles de chaque image, les durées, les fps, l’éventuelle boucle et le pivot. Il est lu par le chargeur d’atlas de Phaser et par les importeurs Aseprite de Godot et Unity.

4 · Change sa couleur ou retourne-le

N’importe quel effet accepte une palette, une rampe de couleurs du foncé au clair. Un feu bleu :

node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'

En code, passe-lui les options à la création : palette pour la couleur et flip: true pour le retourner.

5 · Des attaques jouées

Un effet seul ressemble à un autocollant. Ce qui rend un coup crédible, c’est le corps : l’anticipation, le gel à l’impact (hit-stop), la cible qui recule et la récupération. Les 61 effets avec personnage et les 12 attaques complètes intègrent cette animation.

• Pour la jouer en entier, avec personnage et cible, remplace createFx par createAct.
• Si tu as ton propre personnage, les timings sont fournis sous forme de données dans efecto.act (ou dans meta.pixelfx.act du JSON de la sheet) : lance ton animation d’anticipation plus tôt et fige tout pendant l’impact.

6 · La skill Claude Code

Installe-la comme plugin dans Claude Code :

/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx

(Ou copie le dossier skills/pixelfx dans ~/.claude/skills/.) Ensuite, demande-lui ce que tu veux :

Ajoute un frost nova à l’attaque ultime de mon mage.

Fais cinq versions d’un scintillement quand on ramasse une pièce et montre-moi les deux meilleures.

Exporte les catégories feu et explosions en sprite sheets pour Godot.

Ce coup manque de punch : rends-le plus percutant.

Ajoute une anticipation à ce sort et fais réagir l’ennemi.

7 · Crée tes propres effets

node tools/new.mjs arcane/mon-sort       # point de départ qui fonctionne déjà (--loop pour une boucle)
node tools/render.mjs arcane/mon-sort    # regarde records/arcane/mon-sort/contact.png
node tools/check.mjs arcane/mon-sort     # fuites, coupures, aléatoire sans graine, images lentes

Itère : regarde la planche contact, corrige le pire et relance le rendu. Avec --gif ou --mp4, tu vois le mouvement. node tools/serve.mjs ouvre la galerie en local avec tes effets dedans.

Licence

MIT, code et effets : utilise-les dans n’importe quel projet, commercial compris. Certaines parties adaptent des effets sous MIT de Hugo Duprez et de Hollow Crown. La police « Patch Pixel » de la galerie appartient à Patch et n’est pas couverte par la MIT (voir NOTICE.md).

Checklist

• Galerie parcourue et effets choisis.
• Jeu web : npm i github:patch-gg/pixelfx. Autre moteur : sprite sheets avec --sheet.
• Palette ajustée aux couleurs de ton jeu.
• Skill installée dans Claude Code pour les effets manquants.
• Mention de licence MIT incluse dans ton jeu.