RESSOURCEN FÜR KREATIVE / PIXEL ART
PixelFX von Patch zeichnet Animationen per Code: Feuer, Zauber, Sammelobjekte und mehr. Der Katalog der geprüften Revision enthält 244 Effekte. Bearbeitbares JavaScript erlaubt einer KI, Effekte anzupassen, zu rendern und zu verbessern. PixelFX liefert visuelles Feedback; die Regeln bleiben in deinem Spiel.
Quelle geprüft: 5. November 2026 · Revision a841596
Der Originalcode läuft lokal in deinem Browser. Ändere Farben und Tempo und drücke Abspielen. Einmalige Effekte stoppen am Ende. Die Vorschau zeigt nur Effekte, keine Charakteraktionen.
Export mit 20 FPS in nativer Pixelgröße und gewählter Palette und Geschwindigkeit. Lade beide Dateien herunter; JSON enthält Timing, Drehpunkt und MIT-Hinweise. Keine Charakteranimation enthalten.
Wähle einen von drei Effekten, eine Palette und das Tempo. Erzeuge transparente Sprite-Sheets und Metadaten im Browser, ohne Konto oder Credits. Das Werkzeug rendert vorhandenen Code. Neue Effekte erfordern Codeänderungen; ein vollständiges Spiel planst du in Studio.
Beginne mit dem Ereignis, das der Spieler erkennen soll. Ein auffälliger Effekt kann Gegner verdecken oder Belohnungen überstrahlen. Vergleiche diese drei Ansätze mit deinem Hintergrund und der tatsächlichen Figurengröße.
fire/campfireEin Lagerfeuer markiert Lager, Kontrollpunkte oder sichere Bereiche. Halte es dunkler als wichtige Trefferanzeigen und stoppe Updates in inaktiven Szenen. Weitere Wetter- und Umgebungseffekte stehen im offiziellen Katalog.
ice/frost-novaLege Aktivierung, Schadenszeitpunkt und Erholung fest, bevor du die Nova abstimmst. Der sichtbare Eisring implementiert weder Kollisionen noch Schaden oder Abklingzeit. Diese Mechaniken musst du ausdrücklich synchronisieren.
pickups/collect-burstStarte collect burst nach bestätigtem Einsammeln am Objekt. Vergib Punkte einmal und entferne den fertigen Effekt. Verdecken gleichzeitige Blitze den Spieler, begrenze ihre Anzahl oder verwende ruhigere Farben.
Plane einen kleinen Ablauf: durch einen Raum laufen, fünf Kristalle sammeln und nach dem Sieg neu starten. Lege Tastatur- oder Touchsteuerung fest.
Ordne Effekte Ereignissen zu: Feuer für Atmosphäre, Blitz fürs Sammeln, Nova für eine Fähigkeit. Trenne Stimmung, Erfolg und Gefahr.
Plane in Studio oder verwende das Beispiel im eigenen Projekt. Stelle Quellcode oder Exporte bereit; ein Link beweist keinen Bibliotheksimport durch den Assistenten.
Prüfe eine ganze Runde, wiederholtes Sammeln und Neustart. Kontrolliere transparente Ränder auf hellen und dunklen Hintergründen, Drehpunkt und Handyansicht. Sichere die funktionierende Version vor Änderungen.
Installiere es in einem JavaScript-Projekt mit einem ESM-Bundler wie Vite. Das Beispiel erstellt ein Canvas: Klicken oder Tippen löst den Effekt aus. Zeichne ihn im bestehenden Spiel auf einer transparenten Ebene und starte ihn durch ein bestätigtes Spielereignis. Schaden, Kollisionen und Punkte bleiben in der Spiellogik.
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);Repository klonen, Werkzeuge installieren und den Effekt rendern. Der Export liefert einen transparenten PNG-Atlas und JSON im Aseprite-Stil mit Bildzeiten und Drehpunkt. Nutze einen passenden Importer: Ein reiner PNG-Import übernimmt diese Angaben nicht. Die offizielle Anleitung nennt die Voraussetzungen der Render-Werkzeuge.
git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
git checkout a84159688af3ca37a4be05a0d422b94451b2e24e
npm install
node tools/render.mjs ice/frost-nova --sheetDas Repository enthält ein Claude-Code-Plugin. Führe diese beiden Befehle in Claude Code aus. Anderen Assistenten gibst du die ausgewählten Quelldateien und den folgenden Auftrag. Diese Seite installiert das Plugin nicht in Studio und garantiert keinen automatischen GitHub-Import.
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfxErgänze mein Browserspiel um den PixelFX-Effekt collect-burst. Behalte Steuerung, Punkte und Kollisionen bei. Löse ihn genau einmal pro eingesammeltem Objekt aus, mit festem Seed und blauer Palette. Nutze eine transparente Ebene, entferne fertige Effekte und lösche sie beim Neustart. Behalte MIT-Hinweise bei. Zeige geänderte Dateien und Prüfungen für Wiederholung, gleichzeitige Sammelvorgänge und mobile Leistung. Fehlt der Quellcode, frage nach den Dateien, statt die API zu erfinden.
Palette an den Hintergrund und Tempo an den Treffer anpassen. Ein fester Seed macht Vergleiche reproduzierbar. Prüfe mehrere Effekte, Aufräumen beim Neustart und kleine Bildschirme. Berücksichtige reduzierte Bewegung. Eine schöne Vorschau belegt weder Eignung noch ausreichende Leistung im Spiel.
Er rendert drei vorhandene prozedurale Effekte. Er ruft kein Bildmodell auf und erzeugt keine neue Animation aus Text. PixelFX bietet separat einen Claude-Code-Skill zum Schreiben von Effekten; Studio erstellt Spiele mit KI.
Speichere beide zusammen. PNG enthält das Bildraster, JSON die Rechtecke, Zeiten und den Drehpunkt. Verwende einen kompatiblen Importer oder lies die Rechtecke im Code. Deaktiviere Texturglättung und prüfe den Ankerpunkt.
PixelFX kombiniert Farbe und additives Licht. Ein transparentes PNG speichert das Ergebnis in RGBA; das kann anders aussehen als additives Rendering in der Szene. Vergleiche auf deinem Hintergrund vor der Wahl des Mischmodus. Charakterposen sind nicht enthalten.
Hier exportierst du Grafikressourcen. Öffne für das Gameplay Studio, beschreibe Ziel und Steuerung und bestätige den Plan. Angemeldete Planung ist kostenlos; Builds und Überarbeitungen kosten Studio Credits. PixelFX wird nicht automatisch installiert; Tests in allen Engines werden nicht behauptet.
Code und Effekte stehen unter MIT. Behalte bei Weitergabe Copyright- und Erlaubnishinweise bei, einschließlich der zutreffenden Hinweise auf Hugo Duprez und Hollow Crown. Die Schrift Patch Pixel in gallery/fonts ist ausgeschlossen und wird hier nicht verwendet. Patch pflegt PixelFX; dies ist eine unabhängige Anleitung.
OpenGame / Quelle geprüft: 5. November 2026 · Revision a841596