RECURSOS PARA CREADORES / PIXEL ART
PixelFX, de Patch, dibuja animaciones con código: fuego, magia, objetos y más. El catálogo de la revisión consultada reúne 244 efectos. Su JavaScript editable permite a una IA modificar, renderizar y revisar los resultados. PixelFX aporta la respuesta visual; tu juego conserva sus reglas.
Fuente revisada: 5 de noviembre de 2026 · revisión a841596
El código original se ejecuta localmente en tu navegador. Ajusta colores y velocidad y pulsa Reproducir. Los efectos no cíclicos terminan al completarse. Esta vista no incluye la actuación del personaje.
Exportación a 20 FPS y tamaño nativo, con la paleta y velocidad elegidas. Descarga ambos archivos: el JSON incluye tiempos, pivote y avisos MIT. No contiene animación del personaje.
Elige uno de tres efectos, una paleta y la velocidad. Genera una hoja transparente y sus metadatos en el navegador, sin cuenta ni créditos. Esta herramienta renderiza código existente. Para crear un efecto nuevo, modifica el código con un asistente; para un juego completo, continúa en Studio.
Empieza por el evento que quieres comunicar. Un efecto vistoso puede ocultar enemigos o distraer de una recompensa. Compara estas tres opciones con el fondo y el tamaño real de tus personajes.
fire/campfireUna hoguera puede señalar un campamento, punto de control o zona segura. Mantén su brillo por debajo del impacto importante y detén las actualizaciones fuera de la escena activa. Consulta el catálogo oficial para más ambientes y climas.
ice/frost-novaDefine cuándo se activa el hechizo, aplica daño y termina su recuperación antes de ajustar la nova. El anillo de hielo visible no implementa colisiones, daño ni enfriamiento: debes sincronizarlos en la lógica del juego.
pickups/collect-burstActiva collect burst en la posición del objeto tras confirmar la recogida. Suma los puntos una vez y elimina el efecto al terminar. Si varias recogidas ocultan al jugador, limita los efectos simultáneos o suaviza la paleta.
Planea un ciclo pequeño: moverse por una sala, recoger cinco cristales y reiniciar al ganar. Define teclado o controles táctiles.
Asigna cada efecto a un evento: hoguera para el ambiente, destello para recoger y nova para una habilidad. Separa ambiente, éxito y peligro.
Prepara el juego en Studio o usa el ejemplo en tu proyecto. Proporciona el código o los recursos exportados; un enlace no demuestra que el asistente haya importado la biblioteca.
Prueba una partida completa, recogidas repetidas y reinicio. Comprueba transparencia en fondos claros y oscuros, pivote y legibilidad móvil. Conserva la versión funcional antes de modificarla.
Instálalo en un proyecto JavaScript con un empaquetador ESM como Vite. El ejemplo crea un Canvas: haz clic o toca para activar el efecto. En tu juego, dibújalo sobre una capa transparente y actívalo desde un evento confirmado. Mantén el daño, las colisiones y la puntuación en la lógica del juego.
npm install github:patch-gg/pixelfx#a84159688af3ca37a4be05a0d422b94451b2e24eimport { createFrame, clearFrame, createFx, composite } from 'pixelfx';
import * as burst from 'pixelfx/fx/pickups/collect-burst';
const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 180;
canvas.style.cssText = 'width:640px;max-width:100%;image-rendering:pixelated;background:#111';
document.body.append(canvas);
const ctx = canvas.getContext('2d');
const frame = createFrame(320, 180);
const pixels = ctx.createImageData(320, 180);
let fx;
canvas.addEventListener('pointerdown', () => {
fx = createFx(burst, { x: 160, y: 120, seed: 3 });
});
let previous;
function tick(now) {
const dt = previous === undefined ? 0 : Math.min((now - previous) / 1000, 0.05);
previous = now;
clearFrame(frame);
if (fx) {
fx.update(dt);
fx.draw(frame);
if (fx.done()) fx = undefined;
}
composite(frame, pixels.data);
ctx.putImageData(pixels, 0, 0);
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);Clona el repositorio, instala sus herramientas y renderiza el efecto. Obtendrás un atlas PNG transparente y JSON de estilo Aseprite con tiempos y pivote. Usa un importador compatible: importar solo el PNG no aplica esos datos. Consulta los requisitos de las herramientas en la guía oficial.
git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
git checkout a84159688af3ca37a4be05a0d422b94451b2e24e
npm install
node tools/render.mjs ice/frost-nova --sheetEl repositorio incluye un complemento para Claude Code. Instálalo ejecutando estas dos órdenes dentro de Claude Code. Para otro asistente, proporciona el código seleccionado y estas instrucciones. Esta página no instala el complemento en Studio ni garantiza importaciones automáticas desde GitHub.
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfxAñade el efecto collect-burst de PixelFX a mi juego web. Conserva controles, puntuación y colisiones. Actívalo una sola vez por objeto recogido, con semilla fija y paleta azul. Usa una capa transparente, elimina el efecto al terminar y limpia los efectos al reiniciar. Conserva los avisos MIT. Muestra los archivos modificados y cómo comprobar repeticiones, recogidas simultáneas y rendimiento móvil. Si no tienes el código fuente, pídeme los archivos; no inventes la API.
Adapta la paleta al fondo y la velocidad al impacto. Usa una semilla fija para comparar. Comprueba efectos simultáneos, limpieza al reiniciar y legibilidad en pantallas pequeñas. Respeta el movimiento reducido. Una vista atractiva no demuestra compatibilidad ni rendimiento en tu juego.
Renderiza tres efectos procedurales existentes. No llama a un modelo de imagen ni crea animaciones nuevas a partir de texto. PixelFX ofrece aparte una skill de Claude Code para escribir efectos; Studio genera juegos con IA.
Guárdalos juntos. PNG contiene la cuadrícula; JSON define rectángulos, tiempos y pivote. Usa un importador compatible o lee los rectángulos en tu código. Desactiva el suavizado de texturas y comprueba el punto de anclaje.
PixelFX combina color y luz aditiva. El PNG transparente fija el resultado en RGBA, que puede diferir del renderizado aditivo en tu escena. Compara sobre tu fondo antes de elegir la mezcla. Solo se exporta el efecto, sin poses del personaje.
Aquí se exportan recursos visuales. Para crear la jugabilidad, abre Studio, describe objetivos y controles y confirma el plan. Planificar con sesión iniciada es gratis; generar y revisar usa Studio Credits. No se instala PixelFX automáticamente ni se garantiza compatibilidad probada con todos los motores.
El código y los efectos usan MIT. Conserva los avisos de copyright y permiso al redistribuir, incluidos los aplicables a Hugo Duprez y Hollow Crown. La fuente Patch Pixel de gallery/fonts queda excluida y no se usa aquí. Patch mantiene PixelFX; esta guía es independiente.
OpenGame / Fuente revisada: 5 de noviembre de 2026 · revisión a841596