pixelfx: 244 effetti pixel art pronti, e colpi che finalmente pesano

Cos'è e perché conta

Stai facendo un gioco a pixel con Claude. Il personaggio si muove, il nemico perde vita, ma il colpo è un lampo piatto: niente scintille, niente fumo, nessun peso. Animarli a mano è lungo, e se li chiedi a Claude in un messaggio solo di solito vengono mediocri.

pixelfx è una libreria di 244 effetti pixel art, ognuno un piccolo file di codice: fuoco, esplosioni, magie, monete, meteo e molto altro. Niente immagini: ogni effetto si disegna da solo, quindi lo ricolori, lo specchi e lo esporti come sprite sheet, l'immagine con tutti i fotogrammi in griglia che ogni motore di gioco sa animare. In più c'è una skill, un pacchetto di istruzioni per Claude Code, che usa la libreria e crea effetti nuovi.

È gratuito, con licenza MIT. È nato su GitHub il 30 ottobre 2026 e in due giorni ha passato le 1.600 stelle. È per chi fa giochi da solo, nel browser o in Godot, Unity e simili.

1. Prima guardali nella galleria

Prima di installare qualsiasi cosa apri la galleria, https://patch-gg.github.io/pixelfx/: tutti e 244 in movimento, con una ricerca. Clicca un effetto:

• palette cambia i colori con una tavolozza pronta: il fuoco diventa blu in un clic.
• new seed fa un'altra versione; mirror lo gira; character nasconde il manichino grigio.
• sprite sheet ti dà l'immagine con tutti i fotogrammi da salvare, con dimensioni e velocità.
• In fondo c'è il codice da copiare.

Se l'effetto che ti serve c'è già, salvi lo sprite sheet e vai al punto 4.

2. Installa la skill in Claude Code

Ti servono Claude Code e Node.js; ffmpeg solo per le anteprime GIF e MP4. In Claude Code manda queste due righe, una alla volta:

/plugin marketplace add patch-gg/pixelfx

/plugin install pixelfx@pixelfx

La prima aggiunge il marketplace, il catalogo da cui arriva il plugin. La seconda apre la sua scheda: scegli «Install for you» e vale in tutti i tuoi progetti. Se te lo chiede, lancia /reload-plugins.

Senza plugin: copia la cartella skills/pixelfx del repository in ~/.claude/skills/. È la stessa skill.

Gli strumenti node tools/... non sono nel plugin: girano in una copia del repository. Se non la trova, Claude la clona con git accanto al tuo progetto; da solo: git clone https://github.com/patch-gg/pixelfx.

3. Le richieste da copiare per il tuo gioco

Apri Claude Code nella cartella del gioco e cambia le parti tra [ ].

Aggiungi [un'onda di gelo intorno ai piedi] alla [mossa finale del mio mago]. Cerca prima nella libreria di pixelfx l'effetto più adatto. Mettilo nel gioco con la sua recitazione: carica prima del colpo, fermo quando colpisce, nemico che reagisce.

Fai cinque versioni di [uno scintillio quando raccolgo una moneta] e mostrami le due migliori, con un'anteprima animata. Quella che scelgo la metti nel gioco.

Esporta le categorie fuoco ed esplosioni di pixelfx come sprite sheet per [Godot], poi spiegami come importarle: ancoraggio, filtro che tiene i pixel netti, fotogrammi al secondo.

Quando un effetto non c'è, Claude lo crea, guarda com'è venuto e lo corregge:

Crea con pixelfx un effetto nuovo: [una bolla di veleno che si gonfia, scoppia e lascia una pozza verde]. Guarda prima gli effetti più simili della libreria. Fai tre bozze, disegnale, guardale e correggi ogni volta il difetto peggiore. Alla fine lancia il controllo e mostrami la migliore.

La skill chiede almeno tre giri di disegno e correzione. Quando il gioco c'è già, prova anche:

• «Questo effetto di colpo sembra leggero, senza peso. Rendilo più secco.»
• «Dai a questo incantesimo una carica e fai reagire il nemico.»

4. Mettili nel tuo gioco

Un gioco nel browser: il codice

Per un gioco in JavaScript (canvas, Phaser, PixiJS, Kaplay, three.js) usi il codice, che non ha dipendenze. Lo installi da GitHub, oppure copi src/core e gli effetti che ti servono:

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'effetto si disegna dietro e davanti ai personaggi; poi ingrandisci il canvas con image-rendering: pixelated.

Godot, Unity e gli altri motori: gli sprite sheet

Per Godot, Unity, GameMaker, Defold, LÖVE e Bevy, nella copia del repository lanci:

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

Escono un PNG trasparente con i fotogrammi in griglia e un JSON in stile Aseprite, che leggono Phaser e gli importatori Aseprite di Godot e Unity. Per alcune categorie, o per tutta la libreria in sheets/:

node tools/sheets.mjs fire explosions

1. Metti l'ancoraggio dove dice meta.pixelfx.pivot nel JSON.
2. Importa con filtro nearest e niente compressione: niente pixel sfocati.
3. Fai andare l'animazione a meta.pixelfx.fps.

La luce è cotta nell'immagine e rende sugli sfondi scuri: su una scena chiara, ricolora l'effetto.

5. Cambia colore senza toccare il codice

Ogni effetto accetta una palette: colori esadecimali dal più scuro al più chiaro. Nella galleria la scegli dal menu, da terminale la passi con --opts. La torcia, blu:

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

L'anello di cura, rosa, già come sprite sheet (i colori sono un esempio):

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

Le tavolozze pronte hanno un nome (ice, poison, holy, arcane, gold, neon e altre) e a Claude basta dire «fai il fuoco blu».

6. La recitazione: perché i tuoi colpi sembrano finti

Un effetto da solo sembra un adesivo: un colpo lo vende il corpo intorno. I 61 effetti con un personaggio e le 12 mosse complete di pixelfx lo scrivono nel codice, in quattro tempi:

1. La carica, nella direzione opposta al colpo.
2. Il colpo: un cambio netto di sagoma.
3. Il fermo: quando tocca si blocca tutto, da 0,03 a 0,2 secondi, di più per i colpi pesanti.
4. Il ritorno: il bersaglio arretra, il personaggio torna in guardia.

Con il manichino grigio della libreria usi createAct al posto di createFx, che durante il fermo si blocca da solo. Per un motore, node tools/act.mjs con il nome dell'effetto e --sheet mette tutto in uno sprite sheet, personaggio compreso.

Con il tuo personaggio, lo sprite sheet resta solo l'effetto: la recitazione arriva come dati e l'animazione la fai tu. In meta.pixelfx.act, nel JSON, ci sono windup (la carica), recovery (il ritorno) e hits, con il momento del colpo (t) e la durata del fermo (freeze). Fai partire il tuo attacco windup secondi prima dell'effetto e a ogni colpo blocca tutto, effetto e personaggi, per freeze secondi. Il fermo funziona su qualsiasi effetto.

Gli errori più comuni

• Chiedere un effetto nuovo in un messaggio solo e tenere la prima versione: fai lavorare Claude a giri.
• Importare lo sprite sheet con filtro lineare o compressione: i pixel si sfocano.
• Mettere l'effetto senza carica e senza fermo: resta un adesivo.
• Usare senza controllarli gli effetti disegnati sul corpo, come gelo e veleno: colorano il manichino grigio, non il tuo personaggio.

Checklist

• Ho trovato nella galleria gli effetti che mi servono
• Ho installato la skill in Claude Code
• Ho provato una delle richieste nel mio gioco
• Ho cambiato colore a un effetto con una palette
• Ho messo la carica prima dell'attacco e il fermo sul colpo

Domande frequenti