pixelfx : 244 effets pixel art prêts, et des coups qui ont enfin du poids

Ce que c'est et pourquoi ça compte

Tu fais un jeu en pixels avec Claude. Le personnage bouge, l'ennemi perd de la vie, mais le coup n'est qu'un flash plat : pas d'étincelles, pas de fumée, aucun poids. Les animer à la main est long, et si tu en demandes un à Claude en un seul message, il sort généralement médiocre.

pixelfx est une bibliothèque de 244 effets pixel art, chacun un petit fichier de code : feu, explosions, magie, pièces, météo et bien plus. Aucune image : chaque effet se dessine tout seul, donc tu changes ses couleurs, tu le retournes et tu l'exportes en sprite sheet, l'image avec toutes les frames en grille que n'importe quel moteur de jeu sait animer. En plus, il y a une skill, un paquet d'instructions pour Claude Code, qui utilise la bibliothèque et crée de nouveaux effets.

C'est gratuit, sous licence MIT. Le projet est apparu sur GitHub le 30 octobre 2026 et a dépassé les 1 600 étoiles en deux jours. C'est pour ceux qui font des jeux seuls, dans le navigateur ou dans Godot, Unity et compagnie.

1. Regarde-les d'abord dans la galerie

Avant d'installer quoi que ce soit, ouvre la galerie, https://patch-gg.github.io/pixelfx/ : les 244 en mouvement, avec une recherche. Clique sur un effet :

• palette change les couleurs avec une palette prête : le feu devient bleu en un clic.
• new seed fait une autre version ; mirror le retourne ; character cache le mannequin gris.
• sprite sheet te donne l'image avec toutes les frames à enregistrer, avec tailles et vitesse.
• En bas, il y a le code à copier.

Si l'effet qu'il te faut existe déjà, enregistre le sprite sheet et passe à l'étape 4.

2. Installe la skill dans Claude Code

Il te faut Claude Code et Node.js ; ffmpeg seulement pour les aperçus GIF et MP4. Dans Claude Code, envoie ces deux lignes, une à la fois :

/plugin marketplace add patch-gg/pixelfx

/plugin install pixelfx@pixelfx

La première ajoute le marketplace, le catalogue d'où vient le plugin. La seconde ouvre sa fiche : choisis « Install for you » et il marche dans tous tes projets. S'il te le demande, lance /reload-plugins.

Sans plugin : copie le dossier skills/pixelfx du dépôt dans ~/.claude/skills/. C'est la même skill.

Les commandes node tools/... ne sont pas dans le plugin : elles tournent dans une copie du dépôt. S'il n'en trouve pas, Claude en clone une avec git à côté de ton projet ; tout seul : git clone https://github.com/patch-gg/pixelfx.

3. Les demandes à copier pour ton jeu

Ouvre Claude Code dans le dossier du jeu et change les parties entre [ ].

Ajoute [une onde de givre autour des pieds] à [l'attaque ultime de mon mage]. Cherche d'abord dans la bibliothèque pixelfx l'effet le plus adapté. Mets-le dans le jeu avec son jeu d'acteur : élan avant le coup, arrêt à l'impact, ennemi qui réagit.

Fais cinq versions [d'un scintillement quand je ramasse une pièce] et montre-moi les deux meilleures, avec un aperçu animé. Celle que je choisis, tu la mets dans le jeu.

Exporte les catégories feu et explosions de pixelfx en sprite sheets pour [Godot], puis explique-moi comment les importer : ancrage, le filtre qui garde les pixels nets, images par seconde.

Quand un effet n'existe pas, Claude le crée, regarde le résultat et le corrige :

Crée avec pixelfx un nouvel effet : [une bulle de poison qui gonfle, éclate et laisse une flaque verte]. Regarde d'abord les effets les plus proches de la bibliothèque. Fais trois brouillons, rends-les, regarde-les et corrige à chaque fois le pire défaut. À la fin, lance la vérification et montre-moi le meilleur.

La skill demande au moins trois tours de rendu et de correction. Quand le jeu existe déjà, essaie aussi :

• « Cet effet de coup paraît léger, sans poids. Rends-le plus sec. »
• « Donne de l'élan à ce sort et fais réagir l'ennemi. »

4. Mets-les dans ton jeu

Un jeu dans le navigateur : le code

Pour un jeu en JavaScript (canvas, Phaser, PixiJS, Kaplay, three.js), tu utilises le code, qui n'a aucune dépendance. Installe-le depuis GitHub, ou copie src/core et les effets dont tu as besoin :

npm i github:patch-gg/pixelfx

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

const frame = createFrame(320, 180);
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");
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);
  ctx.putImageData(img, 0, 0);
}

L'effet se dessine derrière et devant les personnages ; ensuite, agrandis le canvas avec image-rendering: pixelated.

Godot, Unity et les autres moteurs : les sprite sheets

Pour Godot, Unity, GameMaker, Defold, LÖVE et Bevy, lance dans ta copie du dépôt :

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

Tu obtiens un PNG transparent avec les frames en grille et un JSON façon Aseprite, que lisent Phaser et les importeurs Aseprite pour Godot et Unity. Pour quelques catégories, ou pour toute la bibliothèque dans sheets/ :

node tools/sheets.mjs fire explosions

1. Place l'ancrage là où l'indique meta.pixelfx.pivot dans le JSON.
2. Importe avec le filtre nearest et sans compression : pas de pixels flous.
3. Joue l'animation à meta.pixelfx.fps.

La lueur est intégrée à l'image et rend bien sur les fonds sombres : dans une scène claire, change les couleurs de l'effet.

5. Change les couleurs sans toucher au code

Chaque effet accepte une palette : des couleurs hexadécimales de la plus sombre à la plus claire. Dans la galerie, tu la choisis dans le menu ; dans le terminal, tu la passes avec --opts. La torche, en bleu :

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

L'anneau de soin, en rose, directement en sprite sheet (les couleurs sont un exemple) :

node tools/render.mjs holy/heal-aoe --sheet --opts '{"palette": ["#301","#614","#a26","#e5a","#fad","#fff"]}'

Les palettes prêtes ont un nom (ice, poison, holy, arcane, gold, neon et d'autres), et il suffit de dire à Claude « fais le feu en bleu ».

6. Le jeu d'acteur : pourquoi tes coups ont l'air faux

Un effet seul ressemble à un autocollant : ce qui vend un coup, c'est le corps autour. Les 61 effets avec personnage et les 12 attaques complètes de pixelfx l'écrivent dans le code, en quatre temps :

1. L'élan, dans la direction opposée au coup.
2. Le coup : un changement net de silhouette.
3. L'arrêt : à l'impact tout se fige, de 0,03 à 0,2 seconde, plus longtemps pour les coups lourds.
4. Le retour : la cible recule, le personnage revient en garde.

Avec le mannequin gris de la bibliothèque, tu utilises createAct au lieu de createFx, qui se fige tout seul pendant l'arrêt. Pour un moteur, node tools/act.mjs avec le nom de l'effet et --sheet met tout dans un sprite sheet, personnage compris.

Avec ton propre personnage, le sprite sheet reste l'effet seul : le jeu d'acteur arrive sous forme de données et l'animation, c'est toi qui la fais. Dans meta.pixelfx.act, dans le JSON, il y a windup (l'élan), recovery (le retour) et hits, avec le moment du coup (t) et la durée de l'arrêt (freeze). Lance ton attaque windup secondes avant l'effet et, à chaque coup, fige tout, effet et personnages, pendant freeze secondes. L'arrêt marche sur n'importe quel effet.

Les erreurs les plus courantes

• Demander un nouvel effet en un seul message et garder la première version : fais travailler Claude par tours.
• Importer le sprite sheet avec un filtre linéaire ou une compression : les pixels deviennent flous.
• Mettre l'effet sans élan et sans arrêt : il reste un autocollant.
• Utiliser sans les vérifier les effets dessinés sur le corps, comme le givre et le poison : ils colorent le mannequin gris, pas ton personnage.

Check-list

• J'ai trouvé dans la galerie les effets dont j'ai besoin
• J'ai installé la skill dans Claude Code
• J'ai essayé une des demandes dans mon jeu
• J'ai changé les couleurs d'un effet avec une palette
• J'ai mis l'élan avant l'attaque et l'arrêt à l'impact

Questions fréquentes