pixelfx: 244 efectos de pixel art gratis para tu juego y la skill de Claude Code que crea los tuyos

Claude ya hace efectos de pixel art para tu juego. Y no hace falta que empiece de cero: pixelfx es un pack gratis de 244 efectos (fuego, explosiones, rayos, magia, lluvia… hasta monedas y cofres) con una skill de Claude Code que crea los que te falten.

Lo mejor: ninguno es una imagen. Cada efecto es un trocito de código, así que le cambias el color, le das la vuelta y lo metes en tu juego.

Qué es pixelfx

• Repo: patch-gg/pixelfx, de Patch.
• Licencia MIT: gratis, también para juegos comerciales.
• Casi 6.000 estrellas en GitHub (5.982 a 8 de noviembre de 2026).
• 244 efectos en 21 categorías: ataques completos, fuego, explosiones, agua, hielo, rayos, ciencia ficción, cuerpo a cuerpo, impactos, proyectiles, aparición y muerte, arcano, sagrado, sombra, estados, naturaleza, clima, interfaz, objetos, transiciones y bichos.
• Método de Hugo Duprez: el código es arcilla, fíate de tus ojos y dale referencias.

1 · Míralos en vivo

Abre la galería y juega con ellos. El catálogo completo está en docs/CATALOG.md del repo.

2 · En un juego web (canvas, Phaser, PixiJS, Kaplay, three.js)

Instálalo desde GitHub (no tiene dependencias):

npm i github:patch-gg/pixelfx

Y úsalo en tu bucle de juego:

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

const frame = createFrame(320, 180);     // la resolución en píxeles de tu juego
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");    // detrás de los personajes
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);
  ctx.putImageData(img, 0, 0); // escala con image-rendering: pixelated
}

3 · En Godot, Unity, GameMaker, Defold, LÖVE o Bevy

Exporta hojas de sprites:

git clone https://github.com/patch-gg/pixelfx && cd pixelfx && npm install
node tools/render.mjs ice/frost-nova --sheet   # PNG transparente + JSON estilo Aseprite
node tools/sheets.mjs                          # exporta toda la librería a sheets/

El JSON trae los rectángulos de cada fotograma, las duraciones, los fps, si va en bucle y el pivote. Lo leen el cargador de atlas de Phaser y los importadores de Aseprite de Godot y Unity.

4 · Cámbiale el color o dale la vuelta

Cualquier efecto acepta una palette, una rampa de colores de oscuro a claro. Un fuego azul:

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

En código, pásale las opciones al crearlo: palette para el color y flip: true para darle la vuelta.

5 · Ataques actuados

Un efecto solo parece una pegatina. Lo que vende un golpe es el cuerpo: la preparación, la congelación al impactar (hit-stop), el objetivo que se echa atrás y la recuperación. Los 61 efectos con personaje y los 12 ataques completos traen esa actuación.

• Para reproducirlo entero, con personaje y objetivo, cambia createFx por createAct.
• Si tienes tu propio personaje, los tiempos están como datos en efecto.act (o en meta.pixelfx.act del JSON de la hoja): empieza tu animación de preparación antes y congela todo durante el impacto.

6 · La skill de Claude Code

Instálala como plugin dentro de Claude Code:

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

(O copia la carpeta skills/pixelfx a ~/.claude/skills/.) Luego pídele lo que quieras:

Añade un frost nova a la habilidad definitiva de mi mago.

Haz cinco versiones de un brillo al coger una moneda y enséñame las dos mejores.

Exporta las categorías de fuego y explosiones como hojas de sprites para Godot.

Este golpe se nota flojo: hazlo más contundente.

Dale una preparación a este hechizo y haz que el enemigo reaccione.

7 · Crea tus propios efectos

node tools/new.mjs arcane/mi-hechizo       # punto de partida que ya funciona (--loop para un bucle)
node tools/render.mjs arcane/mi-hechizo    # mira records/arcane/mi-hechizo/contact.png
node tools/check.mjs arcane/mi-hechizo     # fugas, cortes, aleatoriedad sin semilla, fotogramas lentos

Itera: mira la hoja de contacto, arregla lo peor y vuelve a renderizar. Con --gif o --mp4 ves el movimiento. node tools/serve.mjs abre la galería en local con tus efectos dentro.

Licencia

MIT, código y efectos: úsalos en cualquier proyecto, comercial incluido. Partes adaptan efectos MIT de Hugo Duprez y de Hollow Crown. La fuente «Patch Pixel» de la galería es de Patch y no entra en la MIT (ver NOTICE.md).

Checklist

• Galería vista y efectos elegidos.
• Juego web: npm i github:patch-gg/pixelfx. Otro motor: hojas de sprites con --sheet.
• Paleta ajustada a los colores de tu juego.
• Skill instalada en Claude Code para los efectos que falten.
• Aviso de licencia MIT incluido en tu juego.