Generatore PixelFX: effetti pixel art per giochi

Generatore PixelFX: crea uno sprite sheet riutilizzabile

Scegli uno dei tre effetti, una palette e la velocità. Genera un foglio trasparente e i metadati nel browser, senza account o crediti. Questo strumento renderizza codice esistente. Per nuovi effetti modifica i sorgenti; per un gioco completo continua in Studio.

Scegli PixelFX in base al suo ruolo

Parti dall’evento da comunicare. Un effetto spettacolare può nascondere nemici o ricompense. Confronta questi tre usi con lo sfondo e le dimensioni reali dei personaggi.

Quattro passi per un gioco con PixelFX

1. 01

   Pianifica un ciclo piccolo: muoversi in una stanza, raccogliere cinque cristalli e ricominciare dopo la vittoria. Definisci tastiera o touch.

2. 02

   Associa effetti a eventi: falò per l’ambiente, bagliore per la raccolta e nova per un’abilità. Distingui atmosfera, successo e pericolo.

3. 03

   Pianifica in Studio o usa l’esempio nel progetto. Fornisci sorgenti o esportazioni: un link da solo non dimostra che l’assistente abbia importato la libreria.

4. 04

   Prova un turno, raccolte ripetute e riavvio. Controlla bordi su sfondi chiari e scuri, perno e leggibilità mobile. Conserva la versione funzionante prima delle modifiche.

Usare PixelFX in un gioco browser

Installalo in un progetto JavaScript con un bundler ESM come Vite. L’esempio crea un Canvas: fai clic o tocca per attivare l’effetto. Nel gioco esistente, disegna su un livello trasparente e attiva l’effetto da un evento confermato. Danni, collisioni e punteggio restano nella logica del gioco.

npm install github:patch-gg/pixelfx#a84159688af3ca37a4be05a0d422b94451b2e24e

import { 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);

Esportare sprite sheet PixelFX

Clona il repository, installa gli strumenti e renderizza l’effetto. Otterrai un atlante PNG trasparente e JSON in stile Aseprite con tempi dei fotogrammi e perno. Usa un importatore compatibile: importare solo il PNG non applica questi dati. Consulta i requisiti degli strumenti nella guida ufficiale.

git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
git checkout a84159688af3ca37a4be05a0d422b94451b2e24e
npm install
node tools/render.mjs ice/frost-nova --sheet

Personalizzare PixelFX con l’IA

Il repository include un plugin per Claude Code. Esegui questi due comandi dentro Claude Code. Per altri assistenti, fornisci i sorgenti selezionati e il prompt seguente. Questa pagina non installa il plugin in Studio e non garantisce importazioni automatiche da GitHub.

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

Domande sul generatore PixelFX

Licenza e attribuzione di PixelFX

Codice ed effetti usano MIT. Conserva gli avvisi di copyright e autorizzazione quando ridistribuisci, inclusi quelli applicabili a Hugo Duprez e Hollow Crown. Il font Patch Pixel in gallery/fonts è escluso e non viene usato qui. Patch mantiene PixelFX; questa è una guida indipendente.

Fonti ufficiali

• Patch / PixelFX — GitHub ↗
• CATALOG.md ↗
• AUTHORING.md ↗
• MIT LICENSE ↗
• NOTICE.md ↗
• PixelFX / MIT + NOTICE

OpenGame / Fonte verificata: 5 novembre 2026 · revisione a841596