pixelfx: 244 efectos pixel art listos, y golpes que por fin pesan

Qué es y por qué importa

Estás haciendo un juego de píxeles con Claude. El personaje se mueve, el enemigo pierde vida, pero el golpe es un destello plano: ni chispas, ni humo, ningún peso. Animarlos a mano es lento, y si se los pides a Claude en un solo mensaje suelen salir mediocres.

pixelfx es una biblioteca de 244 efectos pixel art, cada uno un pequeño archivo de código: fuego, explosiones, magia, monedas, clima y mucho más. Nada de imágenes: cada efecto se dibuja solo, así que le cambias el color, lo reflejas y lo exportas como sprite sheet, la imagen con todos los fotogramas en cuadrícula que cualquier motor de juego sabe animar. Además hay una skill, un paquete de instrucciones para Claude Code, que usa la biblioteca y crea efectos nuevos.

Es gratuito, con licencia MIT. Apareció en GitHub el 30 de octubre de 2026 y en dos días pasó las 1.600 estrellas. Es para quien hace juegos en solitario, en el navegador o en Godot, Unity y similares.

1. Primero míralos en la galería

Antes de instalar nada, abre la galería, https://patch-gg.github.io/pixelfx/: los 244 en movimiento, con un buscador. Haz clic en un efecto:

• palette cambia los colores con una paleta lista: el fuego se vuelve azul en un clic.
• new seed hace otra versión; mirror lo refleja; character oculta el maniquí gris.
• sprite sheet te da la imagen con todos los fotogramas para guardar, con tamaños y velocidad.
• Abajo está el código para copiar.

Si el efecto que necesitas ya está, guardas el sprite sheet y vas al paso 4.

2. Instala la skill en Claude Code

Necesitas Claude Code y Node.js; ffmpeg solo para las vistas previas en GIF y MP4. En Claude Code, manda estas dos líneas, una cada vez:

/plugin marketplace add patch-gg/pixelfx

/plugin install pixelfx@pixelfx

La primera añade el marketplace, el catálogo del que llega el plugin. La segunda abre su ficha: elige «Install for you» y vale en todos tus proyectos. Si te lo pide, lanza /reload-plugins.

Sin plugin: copia la carpeta skills/pixelfx del repositorio en ~/.claude/skills/. Es la misma skill.

Los comandos node tools/... no están en el plugin: se ejecutan en una copia del repositorio. Si no la encuentra, Claude la clona con git junto a tu proyecto; por tu cuenta: git clone https://github.com/patch-gg/pixelfx.

3. Peticiones para copiar para tu juego

Abre Claude Code en la carpeta del juego y cambia las partes entre [ ].

Añade [una onda de hielo alrededor de los pies] al [ataque definitivo de mi mago]. Primero busca en la biblioteca de pixelfx el efecto más adecuado. Mételo en el juego con su actuación: carga antes del golpe, congelación al impactar, enemigo que reacciona.

Haz cinco versiones de [un destello cuando recojo una moneda] y enséñame las dos mejores, con una vista previa animada. La que yo elija la metes en el juego.

Exporta las categorías fuego y explosiones de pixelfx como sprite sheets para [Godot] y luego explícame cómo importarlas: anclaje, el filtro que mantiene los píxeles nítidos, fotogramas por segundo.

Cuando un efecto no está, Claude lo crea, mira cómo ha quedado y lo corrige:

Crea con pixelfx un efecto nuevo: [una burbuja de veneno que se hincha, revienta y deja un charco verde]. Primero mira los efectos más parecidos de la biblioteca. Haz tres borradores, renderízalos, míralos y corrige cada vez el peor defecto. Al final lanza la comprobación y enséñame el mejor.

La skill pide al menos tres rondas de render y corrección. Cuando el juego ya existe, prueba también:

• «Este efecto de golpe se siente ligero, sin peso. Hazlo más seco.»
• «Dale a este hechizo una carga y haz que el enemigo reaccione.»

4. Mételos en tu juego

Un juego en el navegador: el código

Para un juego en JavaScript (canvas, Phaser, PixiJS, Kaplay, three.js) usas el código, que no tiene dependencias. Lo instalas desde GitHub, o copias src/core y los efectos que necesitas:

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);
}

El efecto se dibuja detrás y delante de los personajes; luego amplías el canvas con image-rendering: pixelated.

Godot, Unity y otros motores: los sprite sheets

Para Godot, Unity, GameMaker, Defold, LÖVE y Bevy, en tu copia del repositorio lanzas:

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

Salen un PNG transparente con los fotogramas en cuadrícula y un JSON al estilo Aseprite, que leen Phaser y los importadores de Aseprite para Godot y Unity. Para algunas categorías, o para toda la biblioteca en sheets/:

node tools/sheets.mjs fire explosions

1. Pon el anclaje donde indica meta.pixelfx.pivot en el JSON.
2. Importa con filtro nearest y sin compresión: nada de píxeles borrosos.
3. Reproduce la animación a meta.pixelfx.fps.

La luz va integrada en la imagen y funciona sobre fondos oscuros: en una escena clara, cámbiale el color al efecto.

5. Cambia el color sin tocar el código

Cada efecto acepta una palette: colores hexadecimales del más oscuro al más claro. En la galería la eliges en el menú; desde la terminal la pasas con --opts. La antorcha, azul:

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

El anillo de curación, rosa, directamente como sprite sheet (los colores son un ejemplo):

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

Las paletas listas tienen nombre (ice, poison, holy, arcane, gold, neon y más), y a Claude le basta con «haz el fuego azul».

6. La actuación: por qué tus golpes parecen falsos

Un efecto solo parece una pegatina: lo que vende un golpe es el cuerpo que lo rodea. Los 61 efectos con personaje y los 12 movimientos completos de pixelfx lo escriben en el código, en cuatro tiempos:

1. La carga, en la dirección contraria al golpe.
2. El golpe: un cambio claro de silueta.
3. La congelación: al impactar se para todo, de 0,03 a 0,2 segundos, más en los golpes pesados.
4. La recuperación: el objetivo retrocede, el personaje vuelve a la guardia.

Con el maniquí gris de la biblioteca usas createAct en lugar de createFx, que se para solo durante la congelación. Para un motor, node tools/act.mjs con el nombre del efecto y --sheet lo mete todo en un sprite sheet, personaje incluido.

Con tu propio personaje, el sprite sheet sigue siendo solo el efecto: la actuación llega como datos y la animación la haces tú. En meta.pixelfx.act, en el JSON, están windup (la carga), recovery (la recuperación) y hits, con el momento del golpe (t) y cuánto dura la congelación (freeze). Arranca tu ataque windup segundos antes del efecto y, en cada golpe, para todo, efecto y personajes, durante freeze segundos. La congelación funciona con cualquier efecto.

Errores comunes

• Pedir un efecto nuevo en un solo mensaje y quedarse con la primera versión: haz que Claude trabaje por rondas.
• Importar el sprite sheet con filtro lineal o compresión: los píxeles se vuelven borrosos.
• Poner el efecto sin carga y sin congelación: se queda en pegatina.
• Usar sin revisarlos los efectos dibujados sobre el cuerpo, como hielo y veneno: colorean el maniquí gris, no a tu personaje.

Lista de comprobación

• He encontrado en la galería los efectos que necesito
• He instalado la skill en Claude Code
• He probado una de las peticiones en mi juego
• He cambiado el color de un efecto con una paleta
• He puesto la carga antes del ataque y la congelación en el golpe

Preguntas frecuentes