Pixel Art mit pix

Was macht Pixel Art mit pix?

Verwende diese Fähigkeit, wenn der Nutzer nach Pixel-Art, Sprites, Icons, Logos, Game-Assets, Animationsframes, Spritesheets, GIFs oder .pix-Dateien fragt.

Nicht verhandelbare Prinzipien

• Bevorzuge Lesbarkeit vor Detailreichtum.
• Arbeite in nativer Auflösung; entwerfe niemals hochauflösende Grafik und verkleinere sie gedanklich.
• Verwende harte Kanten, ganzzahlige Koordinaten und kein Anti-Aliasing.
• Verwende eine begrenzte Palette mit expliziten Rollen: Umriss, Schatten, Basis, Highlight und Akzent.
• Baue absichtsvolle Farbcluster statt verstreuter Pixel.
• Halte eine konsistente Lichtrichtung über das gesamte Asset und alle Animationsframes ein.
• Gib die Arbeit nicht nach alleiniger Syntaxvalidierung als abgeschlossen aus. Rendere und überprüfe das Ergebnis visuell.

Anti-Noise-Regel

Füge keine schwebenden Sterne, Glitzer, Staub, Partikel, Eckakzente oder isolierte dekorative Pixel hinzu, es sei denn, der Nutzer hat dies ausdrücklich gewünscht.

Für Logos, Icons, UI-Assets und Sprites mit transparentem Hintergrund:

• standardmäßig null unzusammenhängende dekorative Komponenten;
• halte einen sauberen Sicherheitsabstand um das Motiv;
• bevorzuge eine kompakte primäre Silhouette;
• missbrauche leere Leinwandfläche nicht als Einladung, Dekoration hinzuzufügen;
• füge keine Gruppe mit dem Namen sparkles, stars, dust, particles oder ähnlich hinzu, es sei denn, sie ist angefordert oder für das Motiv wesentlich.

Jeder sichtbare Cluster muss mindestens einen klaren Zweck erfüllen:

1. Silhouette oder Struktur;
2. Form, Beleuchtung oder Material;
3. ein identifizierendes Merkmal;
4. angeforderte Umgebungsdekoration.

Lässt sich ein Cluster nicht in einem kurzen Satz rechtfertigen, entferne ihn. Einzelpixel sind nur akzeptabel, wenn sie funktional sind, z. B. eine Pupille, ein spiegelnder Glanzpunkt, das Ende einer Diagonale oder ein notwendiges Gesichtsmerkmal.

Erforderlicher Workflow

1. Klärung des Briefings. Lege Leinwandgröße, Motiv, Asset-Typ, Stil, Paletteneinschränkungen, Hintergrund und Exportformate fest. Wurde keine Dekoration gewünscht, nimm keine an.
2. Akzeptanzkriterien festlegen. Wähle die relevanten Regeln aus Asset-spezifische Kriterien.
3. Vor dem Zeichnen planen. Definiere die Silhouette, Hauptformen, Palettenrollen, Lichtrichtung, Blickpunkt und Animationsschlüsselposen.
4. Erstelle oder bearbeite die .pix-Quelle. Benenne Gruppen nach semantischer Funktion. Halte optionale Atmosphäre getrennt vom Motiv.
5. Validiere die Quelle. Führe pix check aus.
6. Rendere in nativer Größe. Die native Ausgabe ist die maßgebliche visuelle Prüfung.
7. Rendere eine vergrößerte Vorschau. Verwende Nearest-Neighbor-Ganzzahlskalierung, normalerweise --scale 8.
8. Visuelle Inspektion. Prüfe sowohl native als auch vergrößerte Renderings vor transparentem, hellem und dunklem Hintergrund, wenn das Asset auf verschiedenen Oberflächen erscheinen kann.
9. Durchführen des Aufräumdurchgangs. Klassifiziere jede nicht verbundene Komponente und jeden verdächtigen kleinen Farbcluster. Lösche alles Unbeabsichtigte.
10. Audit, wenn möglich. Führe scripts/audit_png.py auf dem nativen PNG aus. Behandle Warnungen als Aufforderung zur Überprüfung, nicht als automatischen Beweis für einen Fehler.
11. Überarbeiten und erneut rendern. Führe mindestens einen bewussten Aufräumdurchgang durch, bevor du neue Kunstwerke finalisierst.
12. Exportiere die endgültigen Ergebnisse. Erstelle die angeforderten PNGs, Animationsframes, GIFs, Spritesheets und Metadaten.

Kernbefehle

Validieren und rendern:

pix check asset.pix
pix render asset.pix -o asset-1x.png
pix render asset.pix -o asset-8x.png --scale 8

Einen benannten Frame rendern:

pix render asset.pix --frame frame-name -o frame-1x.png
pix render asset.pix --frame frame-name -o frame-8x.png --scale 8

Ein natives PNG aus dem Stammverzeichnis der Fähigkeit auditieren:

python3 skills/pixel-art-pix/scripts/audit_png.py asset-1x.png

Animationsexporte:

pix anim asset.pix -a animation-name --out-dir frames/
pix sheet asset.pix -a animation-name -o sheet.png --json sheet.json
pix gif asset.pix -a animation-name -o animation.gif

Asset-spezifische Kriterien

Logos und Icons

• Verwende eine dominante Silhouette und starken Negativraum.
• Standardmäßig null schwebende Komponenten und null Umgebungspartikel.
• Vermeide Ein-Pixel-Eckakzente, es sei denn, sie klären das Zeichen bei 1x.
• Teste auf transparentem, hellem und dunklem Hintergrund.
• Bestätige die Wiedererkennung in nativer Größe und in der beabsichtigten UI-Anzeigegröße.

Charakter- und Objekt-Sprites

• Die mit Schwarz gefüllte Silhouette muss erkennbar bleiben.
• Augen, Waffen, Gliedmaßen und andere Identifikatoren müssen bei 1x lesbar sein.
• Vermeide Texturen, die mit dem Hauptmerkmal konkurrieren.
• Halte Kontaktschatten am Motiv oder klar daran ausgerichtet, es sei denn, ein abgelöster Schatten ist beabsichtigt.

Szenen und Hintergründe

• Etabliere eine Hierarchie aus Vordergrund, Mittelgrund und Hintergrund.
• Umgebungspartikel sind nur erlaubt, wenn sie die Umgebung, Tiefe oder Bewegung unterstützen.
• Verwende wiederholte Texturmuster absichtlich; vermeide gleichmäßiges zufälliges Sprenkeln.

Animation

• Verwende deutliche Schlüsselposen anstelle von winzigen willkürlichen Pixeländerungen.
• Halte Palette, Beleuchtung und Volumen über alle Frames konsistent.
• Überprüfe den Schleifenübergang und inspiziere jeden Frame einzeln.
• Stelle sicher, dass dekorative Partikel nicht versehentlich zwischen den Frames flackern.

Verbindliche Aufräum-Checkliste

Markiere die Arbeit erst als abgeschlossen, wenn jede Antwort zufriedenstellend ist:

• Ist das Motiv bei 1x erkennbar?
• Kommuniziert die Silhouette das Motiv ohne Innendetails?
• Hat jede nicht verbundene Komponente einen expliziten Zweck?
• Sind alle Ein-Pixel-Markierungen funktional und nicht nur Füller?
• Wurden nicht angeforderte Glitzer, Sterne, Staub und Eckakzente weggelassen?
• Sind Highlights gruppiert und auf eine Lichtquelle ausgerichtet?
• Sind Schatten und Kontaktpunkte beabsichtigt?
• Ist die Palette begrenzt und rollenbasiert?
• Hat das Asset saubere Ränder ohne versehentliches Abschneiden?
• Wurde es in nativer und vergrößerter Skalierung inspiziert?
• Wurde es auf geeigneten Hintergrundfarben überprüft?
• Wurde mindestens eine Aufräumrevision nach dem ersten Rendern abgeschlossen?
• Bei Animation: Sind die Schlüsselposen lesbar und die Schleifen sauber?
• Bei Spritesheets: Sind die Frames geordnet und klar benannt?

Visueller Review-Bericht

Gib beim Abschluss kurz an:

• native Leinwandgröße;
• erstellte Exporte;
• durchgeführte visuelle Prüfungen;
• ob noch losgelöste Komponenten oder winzige Farbcluster vorhanden sind und warum;
• jede absichtlich angeforderte Dekoration.

Beschreibe pix check nicht als visuelle Validierung. Es validiert die Quelle, während Rendern und Inspektion das Kunstwerk validieren.

Referenzen

Lesen, wenn tiefergehende Anleitung nützlich ist:

• Pixel-Art-Konzepte
• Visuelle Qualitätssicherung und Anti-Noise
• pix DSL-Referenz

Beispiel-Assets

• Sauberer animierter Schleim
• Verrauschtes Badge-Anti-Pattern
• Saubere Badge-Korrektur