pixelfx: 244 kostenlose Pixel-Art-Effekte für dein Spiel und die Claude-Code-Skill, die eigene erstellt

Claude macht inzwischen Pixel-Art-Effekte für dein Spiel. Und es muss nicht bei null anfangen: pixelfx ist ein kostenloses Pack mit 244 Effekten (Feuer, Explosionen, Blitze, Magie, Regen … bis hin zu Münzen und Truhen) samt einer Claude-Code-Skill, die erstellt, was dir noch fehlt.

Das Beste: Keiner davon ist ein Bild. Jeder Effekt ist ein kleines Stück Code, also änderst du die Farbe, spiegelst ihn und baust ihn in dein Spiel ein.

Was ist pixelfx?

• Repo: patch-gg/pixelfx, von Patch.
• MIT-Lizenz: kostenlos, auch für kommerzielle Spiele.
• Fast 6.000 Sterne auf GitHub (5.982, Stand 8. November 2026).
• 244 Effekte in 21 Kategorien: komplette Angriffe, Feuer, Explosionen, Wasser, Eis, Blitze, Sci-Fi, Nahkampf, Treffer, Projektile, Spawn und Tod, Arkan, Heilig, Schatten, Statuseffekte, Natur, Wetter, Interface, Items, Übergänge und Kreaturen.
• Methode von Hugo Duprez: Code ist Knetmasse, vertrau deinen Augen und gib Referenzen.

1 · Live ansehen

Öffne die Galerie und probier sie aus. Den kompletten Katalog findest du in docs/CATALOG.md im Repo.

2 · In einem Webspiel (Canvas, Phaser, PixiJS, Kaplay, three.js)

Installiere es direkt von GitHub (keine Abhängigkeiten):

npm i github:patch-gg/pixelfx

Und nutze es in deinem Game-Loop:

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

const frame = createFrame(320, 180);     // die Pixelauflösung deines Spiels
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");    // hinter den Figuren
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);
  ctx.putImageData(img, 0, 0); // skalieren mit image-rendering: pixelated
}

3 · In Godot, Unity, GameMaker, Defold, LÖVE oder Bevy

Exportiere Spritesheets:

git clone https://github.com/patch-gg/pixelfx && cd pixelfx && npm install
node tools/render.mjs ice/frost-nova --sheet   # transparentes PNG + JSON im Aseprite-Format
node tools/sheets.mjs                          # exportiert die ganze Bibliothek nach sheets/

Das JSON enthält die Rechtecke jedes Frames, die Dauer, die fps, ob es loopt, und den Pivot. Gelesen wird es vom Atlas-Loader von Phaser und von den Aseprite-Importern für Godot und Unity.

4 · Farbe ändern oder spiegeln

Jeder Effekt akzeptiert eine palette, eine Farbrampe von dunkel nach hell. Ein blaues Feuer:

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

Im Code übergibst du die Optionen beim Erstellen: palette für die Farbe und flip: true zum Spiegeln.

5 · Inszenierte Angriffe

Ein Effekt allein wirkt wie ein Aufkleber. Was einen Schlag verkauft, ist der Körper: das Ausholen, der Freeze beim Aufprall (Hit-Stop), das Ziel, das zurückweicht, und die Erholung. Die 61 Effekte mit Figur und die 12 kompletten Angriffe bringen diese Inszenierung mit.

• Um alles mit Figur und Ziel abzuspielen, ersetze createFx durch createAct.
• Wenn du eine eigene Figur hast, liegen die Timings als Daten in effekt.act (bzw. in meta.pixelfx.act im JSON des Sheets): Starte deine Ausholanimation früher und friere beim Aufprall alles ein.

6 · Die Claude-Code-Skill

Installiere sie als Plugin in Claude Code:

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

(Oder kopiere den Ordner skills/pixelfx nach ~/.claude/skills/.) Danach kannst du dir wünschen, was du willst:

Füge der Ultimate-Fähigkeit meines Magiers eine Frost Nova hinzu.

Mach fünf Versionen eines Glitzer-Effekts beim Einsammeln einer Münze und zeig mir die zwei besten.

Exportiere die Kategorien Feuer und Explosionen als Spritesheets für Godot.

Dieser Schlag fühlt sich schwach an: Mach ihn wuchtiger.

Gib diesem Zauber ein Ausholen und lass den Gegner reagieren.

7 · Eigene Effekte erstellen

node tools/new.mjs arcane/mein-zauber       # funktionierender Ausgangspunkt (--loop für eine Schleife)
node tools/render.mjs arcane/mein-zauber    # schau dir records/arcane/mein-zauber/contact.png an
node tools/check.mjs arcane/mein-zauber     # Lecks, Abschnitte, Zufall ohne Seed, langsame Frames

Iteriere: Schau dir den Kontaktbogen an, behebe das Schlimmste und rendere neu. Mit --gif oder --mp4 siehst du die Bewegung. node tools/serve.mjs öffnet die Galerie lokal, mit deinen Effekten darin.

Lizenz

MIT, Code und Effekte: Nutze sie in jedem Projekt, auch kommerziell. Teile adaptieren MIT-Effekte von Hugo Duprez und Hollow Crown. Die Schrift „Patch Pixel“ aus der Galerie gehört Patch und fällt nicht unter die MIT (siehe NOTICE.md).

Checkliste

• Galerie angesehen und Effekte ausgewählt.
• Webspiel: npm i github:patch-gg/pixelfx. Andere Engine: Spritesheets mit --sheet.
• Palette an die Farben deines Spiels angepasst.
• Skill in Claude Code installiert für die Effekte, die noch fehlen.
• MIT-Lizenzhinweis in deinem Spiel enthalten.