Stankjedi/poku-pixel-fx

Was macht poku-pixel-fx?

POKU Pixel FX ist eine koreanisch lokalisierte, auf TypeScript basierende Open-Source-Abspaltung von PixelFX von Patch, die als eigenständiges Repository ohne GitHub-Netzwerk-Fork-Link gepflegt wird. Die MIT-Lizenz des Upstream-Projekts würdigt Patch und Hugo Duprez; die Copyright- und Zuordnungshinweise in LICENSE und NOTICE.md müssen erhalten bleiben.

Erfordert Node.js 18 oder neuer; ffmpeg ist optional für GIF- und MP4-Vorschauen.

Pixel-Art-Effekte als Code. Jeder Effekt ist eine einzelne Datei, src/fx/<kategorie>/<name>.ts, die in zwei Puffer zeichnet: Farbe (Pixel: deckend, gedithert oder echt transluzent) und Licht (additives Glühen). Keine Bilder, daher kann ein Effekt live abgespielt, neu eingefärbt, gespiegelt, neu besamt und für jede Engine in ein Sprite-Sheet gerendert werden.

Die Methode ist die von Hugo Duprez (Wie man (gute) Pixel-Art-Effekte mit Claude erstellt): Code ist Ton, vertraue deinen Augen, füttere deine Referenzen. Einmalige Prompts liefern mittelmäßige Effekte. Entwürfe, die du renderst, betrachtest und verfeinerst, machen gute.

Vor allem

1. Arbeite in einem Poku Pixel FX Checkout, das package.json und tools/render.mts enthält. Falls keines existiert, besorge die öffentliche Bibliothek im gewählten Projekt oder Workspace des Benutzers: git clone https://github.com/Stankjedi/poku-pixel-fx.git. Die Skill-Datei allein enthält nicht die Effektbibliothek. Verwende niemals den maschinenspezifischen Pfad einer anderen Person. Installiere die Abhängigkeiten des Checkouts mit npm ci, wenn nötig; wiederhole es nicht, wenn bereits installiert.
2. Führe npm run build aus, bevor du die Tools oder die Galerie verwendest; der Compiler gibt Laufzeitmodule in build/ und CLI-Tools in build-tools/ aus.
3. Überprüfe den Lauf: node build-tools/tools/render.mjs fire/torch schreibt records/fire/torch/contact.png. Öffne dieses PNG mit deinem Bildlesetool. Dieses Kontaktblatt ist, wie du von nun an jeden Effekt siehst.

1. Suche zuerst nach einem vorhandenen Effekt

node build-tools/tools/list.mjs <wörter> durchsucht IDs, Namen, Tags und Beschreibungen (node build-tools/tools/list.mjs frost, node build-tools/tools/list.mjs slash loop). docs/CATALOG.md listet alles nach Kategorie auf. Rendere die Kandidaten und betrachte sie, bevor du dich entscheidest. Die meisten Anfragen sind ein vorhandener Effekt mit anderen Optionen:

• palette: die Hauptrampe, von dunkel zu hell, als Hex-Strings. Jede PAL-Rampe in src/core/color.ts (fire ember lava smoke dust ice water electric volt poison holy heal arcane shadow blood earth stone gold leaf wood metal bone neon cyber matrix candy night) oder eine eigene. Ein blaues Feuer ist {"palette": PAL.ice}.
• seed für eine andere, aber gleichwertige Darstellung; flip um nach links zu schauen; angle zum Drehen; light (0..1+) für Glühstärke; plus die eigenen Knöpfe jedes Effekts in seinen meta.options (Größe, Anzahl, Radius, Text, Höhe...).
• Probiere Optionen ohne Codeänderung: node build-tools/tools/render.mjs fire/torch --opts '{"palette":["#102","#215","#43a","#8cf","#fff"]}'.

2. Setze es ins Spiel ein

Canvas- oder WebGL-Spiele in JS oder TS (einfaches Canvas, Phaser, PixiJS, Kaplay, three.js): verwende den Code direkt. Er hat keine Abhängigkeiten; kopiere src/core und die benötigten Effektdateien oder hänge vom Repository ab.

import { createFrame, clearFrame, createFx, composite } from "poku-pixel-fx";   // src/core/index.ts
import * as frostNova from "poku-pixel-fx/fx/ice/frost-nova";                   // src/fx/ice/frost-nova.ts

const frame = createFrame(320, 180);            // die Pixelauflösung des Spiels; ox, oy scrollt es mit der Kamera
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: hero.x, y: hero.y, flip: hero.facing < 0 });

// jeder Tick
fx.update(dt);
clearFrame(frame);
fx.draw(frame, "back");    // was hinter den Figuren kommt
drawCharacters();          // eigene Sprites, oder zeichne sie selbst in frame.color
fx.draw(frame, "front");
composite(frame, img.data, background);   // Farbe über den Hintergrund plus Licht; oder null für transparent
ctx.putImageData(img, 0, 0);              // skaliere dann die Leinwand mit image-rendering: pixelated hoch
if (fx.done()) removeIt();               // Einmal-Effekte enden von selbst; fx.stop() blendet eine Schleife aus

Mehrere Effekte können sich einen Frame teilen. In einer WebGL-Engine lade das zusammengesetzte RGBA jeden Frame in eine Textur hoch oder rendere den Effekt einmal in ein Sprite-Sheet (unten) und spiele ihn wie jede andere Animation ab.

Jede Engine (Godot, Unity, GameMaker, Defold, LÖVE, Bevy, Construct): exportiere Sprite-Sheets. node build-tools/tools/render.mjs ice/frost-nova --sheet schreibt records/ice/frost-nova/frost-nova.png (transparente Frames in einem Raster) und frost-nova.json (Aseprite-ähnliche Frames, die Phasers Atlas-Lader, Godot- und Unity-Aseprite-Importeure und die meisten Tools lesen; meta.pokuFx enthält fps, loop, Framegröße, Spalten und den Pivot). Setze den Pivot auf meta.pokuFx.pivot (den Ursprung des Effekts, z. B. die Füße), importiere mit Nächster-Nachbar-Filter und ohne Komprimierung und spiele mit meta.pokuFx.fps ab. Glühen ist mit Alpha in das Sheet eingebacken, was bei dunklen Szenen additiv wirkt; für helle Szenen rendere eine neu eingefärbte Version oder behalte den Effekt auf einer dunklen Ebene.

Für die vollständige Bibliothek: node build-tools/tools/render.mjs <kategorie> --sheet erledigt eine ganze Kategorie.

Ein Treffer braucht einen Körper dahinter. Ein Effekt allein sieht aus wie ein Aufkleber. Effekte mit einer Figur tragen einen act: wann der Körper ausholt, wann er einfriert, wie das Ziel reagiert. Verwende es, wie das Spiel gebaut ist:

• Mit der Standardfigur: createAct(slash, { x, y }) statt createFx. act.update(dt), act.draw(frame), und wirf das Bild durch act.shake. Während eines Freeze hält es von selbst still. node build-tools/tools/act.mjs <id> --sheet backt das Ganze in ein Sprite-Sheet.
• Mit der eigenen Figur des Spiels: lese das Timing, slash.act oder meta.pokuFx.act im JSON eines Sheets (windup, recovery, hits mit t und freeze). Spiele die Angriffsanimation der Figur windup Sekunden vor dem Effekt ab und stoppe bei jedem Treffer alles, Effekt und Figuren gleichermaßen, für freeze Sekunden. Host-seitiger Hit-Stop funktioniert bei jedem Effekt, mit oder ohne act.

src/fx/moves/ enthält ganze Angriffe, die aus den Effekten verknüpft sind, vom Ausholen bis zur Erholung: beginne dort, wenn jemand nach einem Move fragt, nicht nach einem Effekt.

3. Erstelle einen neuen Effekt

Lies zuerst docs/AUTHORING.md: es ist der Vertrag (Meta, draw(p, t, o) für reine Effekte oder create(o) für simulierte, lokale Koordinaten, nahtlose Schleifen, leeres Ende), das Toolkit, die Painter-API und die Qualitätslatte. Lies auch docs/QUALITY.md. Behandle shadow/spatial-severance als Referenz für saubere Kurven und verfeinerte Partikel, nicht als Stil, der allen Effekten aufgezwungen werden soll. Neue Effekte sollten die gemeinsamen Helfer für Bänder, Trajektorien-Spuren, Hüllen und Pfadbeleuchtung verwenden, wo es angemessen ist. Behalte die Pixel-Palette im Auge und inspiziere native Größen-Silhouetten, Einschlag-Timing, negativen Raum und Transparenz. Automatisierte Tests garantieren keine künstlerische Qualität. Für treffertragende Effekte lies auch docs/IMPACT_INTERACTIONS.md: erstelle einen Kontaktdeskriptor (Zeit, lokaler Punkt, Normale, Material) und leite daraus formspezifische Reaktion und optionales Szenen-Feedback ab. Überprüfe Boden-/Zielreaktion, sekundäre Kollisionen und Beruhigung. Füge nicht denselben Schockring, Steinschutt oder Bildschirmwackler zu jedem Material hinzu. Bewahre reduzierte Bewegung und festverankerte transparente Exporte. Dann:

1. Sage es in einem Satz mit künstlerischer Anleitung: was es ist, wie es sich bewegt, seine Palette, sein Timing. „Eine Frostnova: Kristalle brechen ringförmig von den Füßen nach außen, ein weißer Blitz im Zentrum, Splitter wirbeln ab, der Boden bleibt frostig und verblasst.“
2. Finde Referenzen in der Bibliothek: node build-tools/tools/list.mjs <wörter>, lies dann die zwei oder drei engsten Effektdateien und borge dir ihre Techniken (Particles und Bits in src/core/sim.ts für Funken, Rauch und Schutt, p.disc für transluzente Volumen, cycle für nahtlose Partikel, tileFbm-Scrolls für Flammen und Wasser). Verwende die lokalen Bibliotheksreferenzen als Qualitätslatte; externe Referenzen sind optional und erfordern Netzwerkzugriff.
3. Entwurf. node build-tools/tools/new.mjs <kategorie>/<name> (füge --loop für eine Schleife hinzu) erzeugt eine Arbeitsdatei. Wenn die Richtung offen ist, schreibe 3 bis 5 wirklich verschiedene Entwürfe (<name>-a.ts .. -e.ts), rendere sie alle (node build-tools/tools/render.mjs "<kategorie>/<name>-*") und betrachte jedes Kontaktblatt, bevor du dich entscheidest. Zeige dem Benutzer die stärksten zwei oder drei, wenn er da ist (--gif erstellt teilbare Animationen). Baue nach Änderungen der Quelldateien vor dem Rendern neu.
4. Sieh, urteile, korrigiere. Rendere, öffne records/<id>/contact.png und urteile wie ein wählerischer Pixelkünstler. Behebe das Schlimmste, rendere erneut. Mindestens drei Runden; ein Prunkstück braucht mehr. --all zeigt jeden Frame, --mp4 zeigt Bewegung in voller Geschwindigkeit.
5. Spiele es nach, wenn eine Figur beteiligt ist: füge export const act hinzu (siehe „Acts“ in docs/AUTHORING.md), mit einem Ausholen vor t = 0, einer Haltungsänderung im Freigabe-Frame, einem Einfrieren bei Kontakt und einer Erholung. node build-tools/tools/act.mjs <id> zeigt aufeinanderfolgende 12-fps-Schritte: beurteile Bewegung daraus und aus --mp4, nicht aus den Abtastwerten eines Kontaktblatts.
6. Überprüfe. node build-tools/tools/check.mjs <id> erfasst Zeichnen außerhalb der Leinwand, Einmal-Effekte, die nicht leer enden, Schleifennähte, ungesäte Zufälligkeit und langsame Frames, und in einem act: Schlüssel in falscher Reihenfolge, unbekannte Haltungsfelder und Hände, die teleportieren. Korrigiere, bis es sauber durchläuft. Lösche die Entwürfe, die du nicht behalten hast.

Worauf zu achten ist, und die übliche Korrektur:

du siehst	Korrektur
es wirkt bei 1x wie Matsch	weniger Farben, eine klare Silhouette, einen Brennpunkt, größere Formen
Sprenkel: einzelne Rauschpixel in Formen	Rauschen weniger schwellen, mit at() quantisieren, kein Rauschen bei kleinen Formen
schwimmend, kein Punch	schnell rein, langsam raus (ease.outQuart/outExpo), einen 1 bis 2 Fram umfassenden weißen Helden-Frame, kürzere Gesamtzeit
steif oder mechanisch	variiere jedes Teilchen (Größe, Geschwindigkeit, Verzögerung, Lebensdauer), füge sekundäre Bewegung hinzu (Funken, Rauch, Schutt)
ausgewaschen	weniger Glühen (k 0.2 bis 0.5), dunklere Randstufen, behalte Weiß nur für den heißesten Kern
flach	Licht von einer Seite: helleres oben-links, dunkleres unten-rechts Schritt; eine dunklere Rampenstufe an der Basis
glatte Verläufe, Vektor-Look	harte Rampenstufen in der Farbe; Weichheit nur im Licht und in transluzentem Rauch
ein Schachbrettmuster, wo Rauch sein sollte	SMOKE, VAPOUR oder DUST Partikel, oder p.disc: echt transluzent, von oben beleuchtet
Naht, wenn eine Schleife umschlägt	cycle, loopNoise(phase), ganze-Zellen tileNoise Scrolls, sin(phase * TAU * n)
ein Einmal-Effekt, der abknipst	lass ihn schrumpfen, ausdithern oder wegfallen, bevor t = Dauer
ein großartiger Effekt an einer leblosen Figur	gib ihm einen act: Ausholen, Freigabe-Pose, Einfrieren bei Kontakt, ein Ziel, das reagiert, Erholung
der act fühlt sich schwerelos an	ein Ausholen entgegengesetzt zum Schlag, ein längeres Einfrieren (bis zu 0,2 s), eine größere Silhouettenänderung, Wackeln
der Treffer landet außer Takt	verschiebe den Trefferschlüssel auf die eigene Konstante des Effekts, nicht auf eine Zeit, die du geschätzt hast
er hält die Waffe schlecht	behalte eine Beugung im Ellenbogen, Schäfte vor der Brust; bei einem Schwung hinkt die Klinge der Hand hinterher; Arme reichen etwa 15 px und strecken sich nicht, also setze den Körper nach
seine Arme kreuzen oder die Pose wirkt flach	er ist uns zu drei Vierteln zugewandt: bei offenen Armen geht die nahe Hand nach links (fx < 0), die ferne Hand nach rechts, mit turn: 1; yaw dreht ihn wirklich

Richtungseffekte zeigen nach rechts, Bodeneffekte stehen auf y = 0, Schauspieler-Effekte wickeln o.actor (Maske und Pixel einer 24 x 38 Standardfigur) und nichts verwendet Math.random. Generische Motive sind in Ordnung; erstelle niemals die Sprites, Figuren oder Logos eines bestimmten Spiels neu.

4. Nativer Code statt JS

Wenn das Spiel JS nicht ausführen kann und ein Sprite-Sheet nicht ausreicht (ein Effekt, der einem bewegten Ziel folgt oder Laufzeit-Farben pro Instanz benötigt), portiere den Effekt. Reine Effekte sind eine Funktion der Zeit; simulierte schreiten die Partikel in src/core/sim.ts voran. Behalte die Zwei-Puffer-Idee, den 4x4 Bayer-Schwellwert für gedithertes Alpha und die Palettenrampen-Nachschlagewerte. Rendere das JS-Original und deinen Port nebeneinander, um zu überprüfen, ob sie übereinstimmen.

Der Kern, alle Effekte, die Galerie und die CLI sind TypeScript-Quellen. Baue vor der Verwendung; nach dem Erstellen oder Ändern eines .ts-Effekts baue vor dem Rendern neu. Die Galerie- und CLI-Suche unterstützt Koreanisch und Englisch; koreanischer Text fällt auf eine Systemschriftart zurück. Für engine-native Arbeit konsultiere docs/NATIVE_MIGRATION.md; behaupte nicht, dass eine native Laufzeit existiert.

Teile ein Ergebnis

Wenn der Benutzer eine öffentliche Freigabe wünscht, verwende das lokale Checkout und führe npm run build gefolgt von npm run share -- <kategorie>/<effekt> aus. Der Befehl rendert ein transparentes PNG und sein Poku-JSON in einem neuen Ordner records/share/, validiert die aktuellen Seitenbegrenzungen für Größe und Animation und gibt absolute Dateipfade sowie die Freigabeseite aus. Es veröffentlicht oder meldet sich nicht an.

Öffne https://poku-pixel-fx.stankjedi.chatgpt.site/shared, melde dich bei Bedarf mit ChatGPT an und folge dem Upload-Ablauf der Seite. Wähle das passende PNG und JSON zusammen im Freigabeformular aus, fülle alle erforderlichen Titel und Tags aus und reiche ein, nachdem der Uploader die Rechteerklärung bestätigt hat. Für mehrere Werke akzeptiert der Bulk-Bereich übereinstimmende PNG- und JSON-Dateinamen. Verwende das vom Benutzer angeforderte Kunstwerk und befolge die Upload- und Bestätigungsregeln des Browsers. Erstelle niemals Identitäts-Header, besorge oder kopiere keine Zugangsdaten und behaupte nicht die rechtlichen Rechte des Benutzers ohne dessen Bestätigung. Überprüfe die Galerie auf eine Erfolgsmeldung und den resultierenden Eintrag, bevor du eine Veröffentlichung behauptest. Die Seite kann Kontingente pro Konto durchsetzen. Bewahre LICENSE, NOTICE und Copyright- und Genehmigungshinweise Dritter bei der Weiterverteilung der Software auf.