diorama-pixel

Diorama Pixel: eine Pixel-Art-Miniatur, die sich bewegt

Du erschaffst einen kleinen Ort – einen Stand, einen Steg, ein Gartengrundstück oder eine Türöffnung – aus einer festen isometrischen Kameraperspektive, gezeichnet als Pixel-Art: Der gesamte Bildausschnitt wird mit 320×240 Pixeln gerendert und mit Nearest-Neighbour hochskaliert; jede Fläche wird über eine 8×8-Bayer-Matrix auf eine kurze Rampe gedeckter Farben quantisiert; die Materialien tragen prozedurale Texturen (Plankenlinien, Strohstreifen, Steine, getüpfeltes Gras, kleckriges Wasser); der Bodenrand löst sich in der weißen Seite auf; die Sonne wirft weiche Schatten; und ein oder zwei winzige Figuren führen in einer Schleife eine klare Aktion aus. Die drei Szenen in examples/ sind das Referenzniveau und haben das Format, das du schreiben wirst.

Dieser Skill ist einer von dreien. diorama zeichnet Vektor-SVG-Illustrationen (UI-Szenen, Strichzeichnungen, Leerzustände, Themes); diorama-worlds rendert detaillierte Three.js-Welten mit beweglichen Figuren und vier Ausführungen. Verwende diesen hier, wenn die Person Pixel, Dithering, einen Retro- oder 16-Bit-Look oder eine Pixel-Szene möchte, die klein und ohne Abhängigkeiten bleiben muss.

Du schreibst eine Sache: die Szene, eine .js-Datei. Der Kernel (kit/pixel.js) und die Seite (kit/page.html) sind festgelegt. Bearbeite sie nie, füge nie eine geänderte Kopie ein und schreibe nie neu, was der Kernel dir liefert (die Kamera, das Licht, Schatten, Texturen, Dithering, der Boden, eine Figurenvorlage, Bäume und Büsche, eine Uhr, die unsichtbar läuft, der Zeiger).

Jede unten genannte Datei befindet sich im Ordner dieses Skills. Schreibe die Szene und die erstellte Seite in das Arbeitsverzeichnis der Person und führe die Skripte von dort aus mit ihrem Pfad in diesem Ordner.

1. Konzept

Schreibe das Konzept in eine Zeile vor jedem Code:

Name. Der Ort und was darin ist. Die eine Aktion, die eine Figur ausführt, und was sich sonst noch bewegt. Was der Zeiger und ein Tippen bewirken.

Wähle einen Ort mit einer Geschichte und einer Nutzung: ein Marktstand, ein Steg, eine Bäckertür, ein Schrebergarten, eine Bushaltestelle, ein Dachgarten. Eine Aktion trägt die Szene (einen Strauß binden, angeln, gießen, kneten), mit Vorfreude und einer Pause, und zwei oder drei ruhige Schleifen darum herum (Stoff, Wasser, Blätter, eine Fahne). Schreibe dann die Teileliste in vier Zeilen: Boden (Zonen: Gras, Pflaster, Wasser, Sand, Erde, ein Weg), Struktur (was steht: ein Stand, ein Schuppen, ein Zaun), Figuren (wer, wo, wohin schauend, was tuend), Leben (was wogt, wippt oder schimmert). Eine Szene umfasst 10–25 Objekte. Wenn die Liste dünn wirkt, wird die Szene es auch tun.

Biete zwei oder drei Konzepte an, wenn es jemanden gibt, den du fragen kannst, und warte. Wenn es niemanden zum Fragen gibt, nimm das mit dem stärksten Standbild und sag, warum.

2. Bauen

1. Lies references/art-direction.md: Palette, Materialien, Dithering, den Bodenrand, den Maßstab der Figuren, was einen Bildausschnitt als Pixel-Miniatur lesbar macht und nicht als unscharfen Render.
2. Lies references/scene-api.md: alle Primitive, Materialien, Hilfsfunktionen und den Tick-Vertrag. Lies kit/pixel.js nicht unterhalb seines Index-Kommentars.
3. Lies das nächste Beispiel: examples/flower-stall.js (Pflaster und Gras, gestreiftes Sonnensegel, zwei Personen, ein Wimpel), examples/pier.js (Wasser und ein Ufer, eine sitzende Person mit Angel, ein Boot, ein Strohschuppen) oder examples/allotment.js (Erde, ein Ziegelweg, Hochbeete, ein Gärtner beim Gießen, eine Vogelscheuche).
4. Schreibe <name>.js: ein Pixel.scene({ … }) mit name, title, means (ein Satz, höchstens 140 Zeichen), hint (was hover, was tippen soll), duration, still, ground, optional materials, build(P) gibt parts zurück (mit parts.hot, jede heiße Gruppe benannt) und tick(ctx) setzt alles von ctx.t / ctx.q aus.
5. Baue: node <skill>/scripts/build.mjs <name>.js schreibt pixel-<name>.html, eine eigenständige Seite ohne Netzwerkanfrage.

3. Prüfen

1. node <skill>/scripts/validate.mjs <name>.js pixel-<name>.html: die Deklaration, die Uhr, die Eigenständigkeit, keine URLs, der Kernel Byte für Byte, das Größenbudget und der Zeiger. Korrigiere jedes FAIL.
2. npm ci --ignore-scripts --prefix <skill> einmal, dann node <skill>/scripts/look.mjs <name>.js <outdir>. Es öffnet die Seite in einem kopflosen Chromium mit blockiertem Netzwerk und schreibt <name>-look.json, das Standbild, vier Momente der Schleife, den Hover, den Druck und eine mobile Ansicht, und prüft Füllung, Bewegung, die Schleifennaht, Picking, Hover, Druck, reduzierte Bewegung, Bildkosten und mobilen Überlauf. Die Bildkosten werden am Bildbudget der Szene gemessen (41,7 ms bei 24 fps); --throttle 4 betrachtet es auf einer vierfach langsameren CPU, wie einem CI-Läufer oder einem Telefon. CHROME_PATH wählt einen Browser aus; ansonsten wird ein installiertes Chrome oder Chromium verwendet.
3. Öffne die PNGs und schau sie dir an. Bestandene Prüfungen machen noch kein Bild. Frage das Standbild: Ist die Handlung in dieser Größe lesbar (Hände, das Werkzeug, das bearbeitete Objekt)? Wird jemand von einem Pfosten oder einem Dach verdeckt? Zeigt jede Fläche ihr Material? Läuft der Boden auf allen Seiten in die Seite aus, ohne dass etwas vom Rahmen abgeschnitten wird? Liegen die Schatten auf dem Boden dort, wo die Sonne ist? Korrigiere dann die Szene, nicht den Kernel, und sieh noch einmal hin.

Gib keine Seite ab, die der Validator ablehnt. Behaupte nicht, der Look sei fertig, wenn du die Bilder nicht geöffnet hast. Ohne Browser sag das deutlich und gib es mit ungeprüftem Look ab.

4. Abgabe

Gib pixel-<name>.html so aus, wie die Person es verlangt hat (die Datei oder ein Artefakt, wenn du eines veröffentlichen kannst). Dann, eine Zeile pro Punkt: das Konzept; das Standbild in Sekunde und warum; die Größe (ca. 50 KB, keine Abhängigkeit); wie man es einbettet (references/scene-api.md, „Einbettung“: ein <canvas>, der Kernel und die Szene in zwei <script>-Tags und Pixel.mount, oder die dort beschriebene React-Komponente); alles, was du nicht überprüfen konntest.

5. Anpassen

Wenn die Person eine Änderung wünscht, bearbeite nur <name>.js, baue neu, validiere und sieh noch einmal hin.

Was schiefgeht

Wenn du dich ertappst	Mach stattdessen
Du greifst zu drei.js, WebGL oder einer Bilddatei	Es gibt keine: der Kernel rastert Festkörper auf einer 2D-Canvas; verwende P.box, P.cyl, P.ball, P.wedge, P.line
Du schreibst requestAnimationFrame, setTimeout oder Math.random	Positioniere alles von ctx.t / ctx.q in tick; verwende P.hash(i, j) für Abwechslung, die bleibt, wo sie ist
position.x += speed * dt	Eine Position von P.phase(t, period), damit das Standbild und die Schleifennaht exakt sind
Eine Figur hinter einer Theke, einem Pfosten oder einem Dach versteckt	Verschiebe sie, senke die Theke, erhöhe das Dach: Die Kamera ist fest, und sie sind die Geschichte
Arme, die als ein Klumpen mit dem Körper lesbar sind	Eine Pose mit ausgestreckten Unterarmen (P.pose(p, 'work' / 'hold')), die Hände halten etwas mit eigener Farbe
Ein Baum als eine große Kugel	P.tree und P.bush: Gruppen von rundschattierten Blattbüscheln
Eine flache Farbe auf einer großen Fläche	Ein texturiertes Material: 'wood', 'thatch', 'stone', 'paving', 'leaf', 'cloth' oder eine Rampe mit tex
Eine harte Kante, wo der Boden endet	Der Boden ist ground: { rx, rz, wobble, fade }: er löst sich bereits auf; füge nie eine Platte oder einen Sockel hinzu
Eine Szene breiter als ihr Boden	Halte alles innerhalb von rx und rz; der Rahmen passt zum Boden
Mehr als 480 px interne Breite	320×240 ist der Look; mehr Pixel sehen aus wie ein Render, nicht wie Pixel-Art
Du bearbeitest kit/pixel.js, um eine Szene zum Laufen zu bringen	Die Szene ist falsch; ändere die Szene

Referenzen

• references/scene-api.md: die Deklaration, P (Primitive, Materialien, Figuren, Posen, Bäume, Rauschen), der Tick-Kontext und der Zeiger, die Laufzeit und Einbettung.
• references/art-direction.md: Palette und Rampen, Materialien und Texturen, Dithering, der Bodenrand, Licht und Schatten, Figuren im Pixel-Maßstab, Komposition.