Konzept-zu-Pixel-Assets

Konzeptkunst → Pixel-Art-Szenen, Schleifen und Charakterpakete

Dieses Skill erfasst einen Produktionsworkflow, der über viele Überprüfungsrunden mit einem Spielteam verfeinert wurde. Die Skripte erledigen die mechanischen Teile. Die folgenden Regeln sind wichtiger: Sie sind das, worum die Prüfer immer wieder gebeten haben. Befolge sie daher standardmäßig und weiche nur ab, wenn der Benutzer dich darum bittet.

Zwei Spuren teilen sich ein Toolkit (scripts/pixkit plus die CLIs in scripts/):

Spur	Eingabe	Ausgabe
Szene (Hintergrund / CG)	1 Konzeptbild pro Einstellung	natives Standbild + exakte 3×-Kopie, optionale 48-Frame-nahtlose Schleife, optionale Parallax-Ebenen, Prüf-PDF, README
Charakter	1 Frontkonzept des Charakters	1x-Front-Sprite, 8–13 Ausdrücke, Leerlauf/Sprechen pro Ausdruck, Zu_/Von_-Übergänge, Nick/Nick_Langsam/Kopfschütteln (+ benutzerdefinierte One-Shots), Normal Maps, Blätter + JSON, Vorschauen, Unity-Skripte, README

Einrichtung: pip install -r requirements.txt (numpy, scipy, scikit-image, opencv-python-headless, Pillow, reportlab), plus ffmpeg für Prüfvideos. Führe python scripts/demo/run_demo.py /tmp/demo einmal aus, um zu bestätigen, dass alles funktioniert (es verwendet nur synthetische Kunst).

0. Bevor du beginnst

1. Finde die bestehenden Konventionen des Projekts und verwende sie wieder. Suche nach früheren Paketen (READMEs, Manifeste, Sprites). Ein neuer Charakter muss die Leinwand, Fußlinie, Pixel-pro-Einheit, Konturfarbe und Höhenskala der Besetzung teilen. Ein neuer Hintergrund muss die native Größe, Palettengröße, Gradation und Vignette teilen. Konsistenz im gesamten Set ist wichtiger als jedes einzelne Asset, das allein gut aussieht. Wenn noch nichts existiert, schlage die folgenden Standardwerte vor und sage dies.
2. Lege den Umfang nur fest, wenn er wirklich offen ist. Frage bei einem Charakter, ob nur das Frontset oder auch Seite / Rücken / Gehen gemacht werden soll. Frage bei einer Szene, ob sie animiert werden soll, wenn die Anfrage unklar ist (manche Einstellungen sollten still bleiben). Ansonsten fang an zu arbeiten; bitte nicht um Erlaubnis für offensichtliche nächste Schritte.
3. Halte die Kunst des Benutzers privat. Liefere Dateien direkt (Zip + wichtige Vorschaubilder). Veröffentliche seine Kunst oder abgeleitete Sprites nicht auf öffentlichen Seiten, es sei denn, er bittet darum.

Standardwerte (ändere sie, um sie an das Projekt anzupassen):

	Szene	Charakter
Größe	640×360 nativ; 1920×1080 = exakte 3× nächste	96×160 Leinwand, Fußlinie y=155, Füße zentriert bei x=48
Farben	24 pro Bild (palette-gesperrt)	Wenig-Farben-Rampe pro Material, etwa 10–30 für das gesamte Paket
Linien	aus der Kunst	1 px Kontur, eine Konturfarbe für die gesamte Besetzung
Bewegung	48 Frames, 12 fps, 4 s, nahtlos	Dauern pro Frame in ms (60-fps-Raster freundlich)
Unity	Punktfilter, keine Komprimierung, Max Size 4096, PPU 32	dasselbe; Pivot (0,5; 0,025)

1. Hausregeln

Jede Regel stammt von einer Korrektur, die ein Prüfer vorgenommen hat. Sie sind keine Geschmackssache.

• 1x-Pixeldichte. Ein Kunstpixel entspricht einem Spielpixel, daher niemals die Detaildichte verdoppeln. Szenen werden in nativer Größe erstellt und nur durch ganze Zahlen skaliert.
• Palette-gesperrt alles. Animationsframes dürfen nur die Farben des Standbildes verwenden. Jeder Effekt in loopfx arbeitet auf Palettenindizes, daher können keine neuen Farben erscheinen.
• Frame 0 = das Standbild, und Schleifen sind nahtlos. Jede Bewegung ist eine Funktion der Phase mit ganzzahligen Zyklen. Liefere Frame 0 der Schleife als Standbild (*_STILL_frame0.png), damit die beiden ohne Sprung ausgetauscht werden können.
• Augen blinzeln nur. Keine Blicke, Augenzucken oder Herumschauen, es sei denn, der Benutzer bittet um einen bestimmten Blick. Wenn er das tut, mache genau diesen einen Blick und nichts weiter (ein Beispiel war „eine Sekunde nach unten schauen“).
• Haare bewegen sich nur, wenn etwas sie physisch bewegt: der Kopf nickt, der Körper tritt auf oder dreht sich. Keine Windböen und kein Flattern beim Atmen, da ein 1-px-Zucken bei jedem Atemzug wie ein Glitch aussieht.
• Starre Dinge wackeln nie. Straßen, Leitplanken, Pfosten, Docks, Felsen, Möbel und Autoinnenräume bleiben in jedem Frame pixel-gesperrt (static-Masken). Halte Wasserwellen 2–3 px von Küstenlinien, Pfosten und Schilf fern.
• Kein Einzelpixel-Blinken. Ein einzelnes Pixel, das blinkt, sieht wie ein toter Pixel aus. Staub treibt, er funkelt nicht. Glanzlichter bleiben spärlich.
• Bewege ganze Blöcke um ganze Pixel. Atmen hebt alles oberhalb der Brustreihe um 1 px an. Ein Nick bewegt den Kopfblock um 1 px. Verschiebe niemals Reihen unabhängig voneinander; das zerreißt Konturen („撕裂“).
• Tausche Ausdrücke innerhalb eines Blinzelns aus. Das Gesicht verändert sich, während die Augen geschlossen sind. Jeder One-Shot-Clip beginnt auf einem Leerlauf-Frame 0 und endet genau auf seinem Ziel-Leerlauf-Frame 0.
• Behebe, was die KI falsch gemacht hat, und lass die Geschichte in Ruhe. Entferne KI-Artefakte: gefleckte Oberflächen, Pseudo-Text, formlose Kleckse, fehlende Hände, unmögliches Licht, Verzierungen an Gegenständen, die sie nicht hätten. Füge keine story-relevanten Inhalte (Charaktere, Hinweise, Schrift) eigenmächtig hinzu oder verschiebe sie. Liste diese Fälle unter „Bestätigung erforderlich“ auf.
• Gleiche Kamera, gleiche Pixel. Wenn zwei Einstellungen eine Kamera oder einen Ort teilen, verwende die etablierten Pixel wieder. Das gilt für einen Raum, ein Autointerieur, die Flacker-Timings einer Lampe und eine Palette. Schnitte zwischen ihnen dürfen nicht springen.
• Respektiere „X nicht animieren“. Wenn der Benutzer nur Standbilder oder sagt, etwas nicht zu bewegen, sperre es und ändere nichts anderes.

2. Szenen-Spur

Lies references/scene-pipeline.md vor der ersten Szene. Lies references/scene-loops.md vor dem Animieren und den Parallax-Abschnitt vor dem Schichten.

1. Pixelisierung in zwei Schritten, damit manuelle Korrekturen dazwischen erfolgen können.

   python scripts/scene_to_pixel.py concept.png OUT --name BG02 [--smooth 8,16] [--keep x0,y0,x1,y1]
   # -> OUT/BG02_stylized.png (unbewertet) + OUT/BG02_compare.png
   

   stylize führt die „handgezeichnete Vereinfachung“ durch:

   • reduziert auf etwa 22 Farben aus der Quelle;
   • glättet jedes Objekt auf höchstens 3 Töne;
   • absorbiert Flecken;
   • schützt kleine helle Merkmale (Lampen, Fenster) und dünne Linien (Schienen, Straßenmarkierungen).

   Verwende --keep für Requisiten, deren genaue Form die Logik der Szene trägt. Verwende --smooth für körnige, GIF- oder JPEG-Quellen. Stufe 1 schreibt auch BG02_native.png (die skalierte Quelle, für Lichter und Masken) und BG02_protected.png. Überprüfe die geschützte Maske auf falsche Linien.

2. Inspiziere in Zoom und korrigiere von Hand mit pixkit.scene:

   • ramp_paint verwandelt gefleckte Böden, Schreibtische und Wände in flache, beleuchtete Bänder;
   • inpaint entfernt Dinge;
   • line_mask_src zeichnet Nähte wieder ein;
   • füge aus früheren Einstellungen ein, die die Kamera teilen.

   Überprüfe Lichtrichtung, Erreichbarkeit und Kontinuität (siehe die Logik-Checkliste in der Referenz).

3. Abschluss: python scripts/scene_to_pixel.py OUT/BG02_fixed.png OUT --name BG02 --finish --grade cold_dusk. Dies bewertet die Palette, fügt die 4-stufige geditherte Vignette hinzu und sperrt das Ergebnis auf 24 Farben. Einstellungen, die zusammengeschnitten werden, müssen eine Palette teilen: verwende scene.finish(a, extra=[b]).

4. Schleife (falls gewünscht):

   • Erstelle Masken als PNGs. Wähle Farben oder zeichne Polygone mit numpy, dann überprüfe sie, indem du sie auf das Standbild legst.
   • Schreibe eine Spezifikation (assets/examples/loop_spec.example.json) und führe python scripts/make_loop.py spec.json aus.
   • Lies den Prüfbericht. Erwarte new_colours: 0, eine Nahtänderung ähnlich der mittleren Änderung zwischen benachbarten Frames und wenige Pixel, die mehr als 8 Mal umschalten.
   • Sieh dir das Review-mp4 an. Die Zahlen erfassen nicht alles.

5. Parallax (falls die Kamera scrollt): siehe die Referenz. Kurz gesagt:

   • behalte den begehbaren Boden und alles darauf in einer Ebene;
   • verwende Geschwindigkeitsfaktoren von etwa 0,3 / 0,45 / 0,6 / 1,0;
   • fülle versteckte Teile der hinteren Ebenen als vollständige, nahtlos kachelnde Panoramen;
   • liefere nur die animierten Zeilenbänder als Blätter (pixkit.parallax).

6. Verpacke mit references/packaging.md:

   • still/, loop/<name>/frames_native/, _1920-Kopien und das Review-mp4;
   • ein Prüf-PDF für jedes Szenenpaket (scripts/make_review_pdf.py);
   • ein README in der Sprache des Benutzers.

3. Charakter-Spur

Lies zuerst references/character-pipeline.md, dann references/character-animation.md.

1. Erster Entwurf:

   python scripts/sprite_from_concept.py concept.png WORK --height 148 [--materials materials.json]
   

   Verwende dieselbe --height wie der Rest der Besetzung, damit alle einen Maßstab teilen. Das Skript schreibt:

   • das rohe Sprite auf der Leinwand;
   • einen Vergleich mit dem Konzept;
   • ASCII-Dumps;
   • info.json, das Konzeptkoordinaten auf die Leinwand abbildet.

   --materials setzt jedes Material auf eine feste Rampe. Verwende Regionen, um gleichfarbige Materialien zu trennen (Haare über dem Kragen, Schürze darunter). Innere Striche werden zum dunkelsten Ton des Materials.

2. Vollende die Basis von Hand. Das ist die eigentliche Arbeit, und das Gesicht braucht sie immer, weil eine Verkleinerung Augen und Münder zerstört.

   • Verwende pixkit.sprite.Symbols, um Regionen als Text auszugeben und zu malen, und grid_zoom, um sie anzuzeigen.
   • Zeichne das Gesicht neu, behalte den Augen-Stil des Konzepts bei.
   • Bereinige Hände und Requisiten; führe fast identische Farben zusammen; fill_enclosed_holes.
   • Vergleiche mit dem Konzept bei 5× und mit der Besetzung im gleichen Maßstab.

3. Erstelle die gesichtslose Gesichtsbasis: dasselbe Sprite mit Augen, Mund und Augenbrauen, die mit Haut übermalt sind. Die Nase und andere permanente Merkmale bleiben.

4. Schreibe die Charakterkonfiguration (assets/examples/character.example.json):

   • das Gesichts-Rig: jedes Merkmal ist eine Box, und jeder Zustand ist ein kleines Zeichenraster;
   • die Ausdrücke;
   • Mund-Übersteuerungen beim Sprechen;
   • zusätzliche Darbietungen;
   • Vorschaubezeichnungen in der Sprache des Benutzers;
   • die Normal-Map-Teilregeln;
   • die Unity-Namen.

   Entwerfe die Ausdrücke bei 4–8× Zoom gegeneinander, bevor du baust. Augen und Mund tragen den Ausdruck, wenn der Pony die Augenbrauen verdeckt.

5. Baue + Prüfe: python scripts/build_character.py character.json.

   • Das Skript weigert sich zu laufen, wenn das neutrale Gesicht des Rigs die Basis nicht pixelgenau reproduziert, denn eine Nichtübereinstimmung würde bedeuten, dass jeder Übergang springt.
   • Es schreibt das gesamte Paket und audit.json und beendet sich mit einem Fehler bei Problemen: Palette, Streupixel, Löcher, Kontinuität, Sprech-Frames außerhalb des Mundes, Blinzel-Frames außerhalb der Augen, Normal-Map-Determinismus.

6. Schau es dir an.

   • Öffne previews/expressions_2x.png, previews/frames/*, previews/scale_with_cast_3x.png und previews/normals_lit_3x.png.
   • Spiele previews/interactive_preview.html mit Playwright ab oder bitte den Benutzer, es zu öffnen.
   • Korrigiere, was falsch aussieht, und baue dann neu.

4. Liefern und Iterieren

• Jede Lieferung ist eine neue Version: name_V01, dann V02 und so weiter. Überschreibe niemals eine frühere. Setze ein Änderungsprotokoll an den Anfang des README:

  • was sich geändert hat;
  • warum (zitiere das Feedback, das adressiert wird);
  • was überprüft wurde.

  Halte alles, was du nicht ändern wolltest, pixelidentisch, überprüfe das und sage es.

• README in der Sprache des Benutzers. Verwende das Abschnittsmuster aus references/packaging.md: Spezifikation, Dateien, was sich bewegt, behobene KI-Artefakte, gefundene Logikprobleme, Bestätigung erforderlich, Unity-Schritte, Prüfungen. Verwende konkrete Zahlen („264 Frames gescannt, 13 Farben, 0 Streupixel“). Markiere Skripte, die nie in Unity ausgeführt wurden, als ungetestet.

• Stelle offene Fragen, anstatt zu raten. Beispiele: ein Mund, der hinzugefügt wurde, wo das Konzept keinen hatte; ein Charakter oder eine Requisite, die sich zwischen zwei Einstellungen mit derselben Kamera bewegt hat; ein dekoratives Element, das der Tageszeit der Geschichte widerspricht. Biete Optionen an.

• Sende die Zip-Datei plus 1–3 wichtige Vorschaubilder und gib eine kurze Zusammenfassung. Erzähle nicht jeden Schritt.

5. Qualitätssicherung

Gehe vor jeder Lieferung references/qa-checklist.md durch. Die Prüfberichte automatisieren den größten Teil. Der visuelle Durchgang im Zoom fängt den Rest: Risse, kriechender Dither, Formen, die beim Schwingen ihre Dicke ändern, Nebel, der sich nicht mit seinem Boden bewegt, Münder, die die Kinnlinie berühren, und halbe Blinzelbewegungen, die springen.

Referenzdateien

Datei	Wann lesen
references/scene-pipeline.md	beim Pixelisieren einer Szene: Stylize-Parameter, KI-Artefakt- und Logikkorrekturen, Gradationen, gemeinsame Paletten
references/scene-loops.md	beim Animieren eines Standbildes: Effektkatalog und -parameter, bekannte Fehlermodi, Lampenflackern, CG-Personen, Bild-zu-Video-Clips, prozedurale Kamerabewegungen, Parallax
references/character-pipeline.md	Konzept → 1x-Basis-Sprite, Gesichts-Neuzeichnung, ASCII-Bearbeitung
references/character-animation.md	das Gesichts-Rig, Ausdrucksdesign, Clip-Set und Timings, Bewegungsregeln, Seite/Rücken/Gehen-Erweiterungen
references/normal-maps.md	Normal-Map-Methode, Teilregeln, Unity-Beleuchtungseinrichtung
references/packaging.md	Ordnerstrukturen, JSON/Manifest-Formate, README-Vorlage, Prüf-PDF
references/qa-checklist.md	vor jeder Lieferung