pixelfx: 244 fertige Pixel-Art-Effekte, und Treffer, die endlich sitzen

Was es ist und warum es zählt

Du baust mit Claude ein Pixel-Spiel. Die Figur bewegt sich, der Gegner verliert Leben, aber der Treffer ist ein flacher Blitz: keine Funken, kein Rauch, kein Gewicht. Sie von Hand zu animieren dauert lange, und wenn du Claude in einer einzigen Nachricht darum bittest, wird es meist mittelmäßig.

pixelfx ist eine Bibliothek mit 244 Pixel-Art-Effekten, jeder eine kleine Code-Datei: Feuer, Explosionen, Magie, Münzen, Wetter und vieles mehr. Keine Bilder: Jeder Effekt zeichnet sich selbst, also färbst du ihn um, spiegelst ihn und exportierst ihn als Sprite Sheet, das Bild mit allen Frames im Raster, das jede Game-Engine animieren kann. Dazu kommt ein Skill, ein Paket mit Anweisungen für Claude Code, das die Bibliothek nutzt und neue Effekte baut.

Es ist kostenlos, unter MIT-Lizenz. Es ist am 30. Oktober 2026 auf GitHub erschienen und hatte nach zwei Tagen über 1.600 Sterne. Es ist für alle, die allein Spiele bauen, im Browser oder in Godot, Unity und Co.

1. Schau sie dir zuerst in der Galerie an

Bevor du irgendetwas installierst, öffne die Galerie, https://patch-gg.github.io/pixelfx/: alle 244 in Bewegung, mit einer Suche. Klick auf einen Effekt:

• palette ändert die Farben mit einer fertigen Palette: Das Feuer wird mit einem Klick blau.
• new seed macht eine andere Version; mirror spiegelt ihn; character blendet die graue Puppe aus.
• sprite sheet gibt dir das Bild mit allen Frames zum Speichern, mit Größen und Geschwindigkeit.
• Unten steht der Code zum Kopieren.

Wenn der Effekt, den du brauchst, schon da ist, speicherst du das Sprite Sheet und gehst zu Schritt 4.

2. Installiere den Skill in Claude Code

Du brauchst Claude Code und Node.js; ffmpeg nur für die GIF- und MP4-Vorschauen. Schick in Claude Code diese zwei Zeilen, eine nach der anderen:

/plugin marketplace add patch-gg/pixelfx

/plugin install pixelfx@pixelfx

Die erste fügt den Marketplace hinzu, den Katalog, aus dem das Plugin kommt. Die zweite öffnet seine Seite: Wähl „Install for you“ und es gilt in allen deinen Projekten. Wenn es danach fragt, starte /reload-plugins.

Ohne Plugin: Kopier den Ordner skills/pixelfx aus dem Repository nach ~/.claude/skills/. Es ist derselbe Skill.

Die Befehle node tools/... sind nicht im Plugin: Sie laufen in einer Kopie des Repositorys. Findet Claude keine, klont es eine mit git neben dein Projekt; selbst: git clone https://github.com/patch-gg/pixelfx.

3. Anfragen zum Kopieren für dein Spiel

Öffne Claude Code im Ordner deines Spiels und ändere die Teile in [ ].

Füge [eine Frostwelle um die Füße] zu [der Ultimate meines Magiers] hinzu. Such zuerst in der pixelfx-Bibliothek den passendsten Effekt. Bau ihn mit seinem Schauspiel ins Spiel ein: Ausholen vor dem Schlag, Einfrieren beim Treffer, Gegner, der reagiert.

Mach fünf Versionen von [einem Funkeln, wenn ich eine Münze aufsammle] und zeig mir die besten zwei, mit einer animierten Vorschau. Die, die ich wähle, baust du ins Spiel ein.

Exportiere die Kategorien Feuer und Explosionen von pixelfx als Sprite Sheets für [Godot] und erklär mir dann, wie ich sie importiere: Ankerpunkt, der Filter, der die Pixel scharf hält, Frames pro Sekunde.

Wenn es einen Effekt nicht gibt, baut Claude ihn, schaut sich das Ergebnis an und korrigiert es:

Bau mit pixelfx einen neuen Effekt: [eine Giftblase, die anschwillt, platzt und eine grüne Pfütze hinterlässt]. Schau dir zuerst die ähnlichsten Effekte der Bibliothek an. Mach drei Entwürfe, render sie, schau sie an und behebe jedes Mal den schlimmsten Fehler. Am Ende lass die Prüfung laufen und zeig mir den besten.

Der Skill verlangt mindestens drei Runden aus Rendern und Korrigieren. Wenn das Spiel schon steht, probier auch:

• „Dieser Treffereffekt wirkt leicht, ohne Gewicht. Mach ihn knackiger.“
• „Gib diesem Zauber ein Ausholen und lass den Gegner darauf reagieren.“

4. Bring sie in dein Spiel

Ein Browserspiel: der Code

Für ein JavaScript-Spiel (Canvas, Phaser, PixiJS, Kaplay, three.js) nutzt du den Code, der keine Abhängigkeiten hat. Installier ihn von GitHub oder kopier src/core und die Effekte, die du brauchst:

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

Der Effekt zeichnet sich hinter und vor den Figuren; dann skalier das Canvas mit image-rendering: pixelated hoch.

Godot, Unity und andere Engines: Sprite Sheets

Für Godot, Unity, GameMaker, Defold, LÖVE und Bevy startest du in deiner Kopie des Repositorys:

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

Heraus kommen ein transparentes PNG mit den Frames im Raster und ein JSON im Aseprite-Stil, das Phaser und die Aseprite-Importer für Godot und Unity lesen. Für einige Kategorien, oder für die ganze Bibliothek in sheets/:

node tools/sheets.mjs fire explosions

1. Setz den Ankerpunkt auf meta.pixelfx.pivot aus dem JSON.
2. Importier mit Nearest-Neighbour-Filter und ohne Kompression: keine verschwommenen Pixel.
3. Spiel die Animation mit meta.pixelfx.fps ab.

Das Leuchten ist ins Bild eingebacken und wirkt auf dunklen Hintergründen: In einer hellen Szene färbst du den Effekt um.

5. Umfärben, ohne den Code anzufassen

Jeder Effekt nimmt eine palette: Hex-Farben von der dunkelsten zur hellsten. In der Galerie wählst du sie im Menü, im Terminal übergibst du sie mit --opts. Die Fackel, blau:

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

Der Heilring, rosa, direkt als Sprite Sheet (die Farben sind ein Beispiel):

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

Die fertigen Paletten haben Namen (ice, poison, holy, arcane, gold, neon und mehr), und Claude reicht ein „mach das Feuer blau“.

6. Das Schauspiel: warum deine Treffer unecht wirken

Ein Effekt allein wirkt wie ein Aufkleber: Einen Treffer verkauft der Körper drumherum. Die 61 Effekte mit Figur und die 12 kompletten Angriffe von pixelfx schreiben es in den Code, in vier Takten:

1. Das Ausholen, in die Gegenrichtung des Schlags.
2. Der Schlag: ein klarer Wechsel der Silhouette.
3. Das Einfrieren: Beim Treffer bleibt alles stehen, 0,03 bis 0,2 Sekunden, länger bei schweren Schlägen.
4. Die Erholung: Das Ziel taumelt zurück, die Figur geht wieder in Deckung.

Mit der grauen Puppe der Bibliothek nimmst du createAct statt createFx, das beim Einfrieren von selbst anhält. Für eine Engine packt node tools/act.mjs mit dem Namen des Effekts und --sheet alles in ein Sprite Sheet, Figur inklusive.

Mit deiner eigenen Figur bleibt das Sprite Sheet nur der Effekt: Das Schauspiel kommt als Daten, die Animation machst du. In meta.pixelfx.act im JSON stehen windup (das Ausholen), recovery (die Erholung) und hits, mit dem Moment des Treffers (t) und der Dauer des Einfrierens (freeze). Starte deinen Angriff windup Sekunden vor dem Effekt und halte bei jedem Treffer alles an, Effekt und Figuren, für freeze Sekunden. Das Einfrieren funktioniert bei jedem Effekt.

Häufige Fehler

• Einen neuen Effekt in einer Nachricht verlangen und die erste Version behalten: Lass Claude in Runden arbeiten.
• Das Sprite Sheet mit linearem Filter oder Kompression importieren: Die Pixel werden unscharf.
• Den Effekt ohne Ausholen und ohne Einfrieren einbauen: Er bleibt ein Aufkleber.
• Die Effekte, die auf den Körper gezeichnet werden, wie Frost und Gift, ungeprüft nutzen: Sie färben die graue Puppe, nicht deine Figur.

Checkliste

• Ich habe in der Galerie die Effekte gefunden, die ich brauche
• Ich habe den Skill in Claude Code installiert
• Ich habe eine der Anfragen in meinem Spiel ausprobiert
• Ich habe einen Effekt mit einer Palette umgefärbt
• Ich habe das Ausholen vor dem Angriff und das Einfrieren beim Treffer eingebaut

Häufige Fragen