Öffnen Sie das Jellyfish Lab, und Sie treffen unser Maskottchen, das durchs Büro schwimmt, mit perlenförmigen Tentakeln hinter sich und einem Fleck farbigen Lichts auf dem Boden. Es sieht aus wie ein Sprite, wird aber während die Seite läuft von Grund auf gezeichnet.
Die Glockenform, das Gesicht, die Tentakel, die Pixelkörnung und das Leuchten kommen alle aus einer kleinen Gruppe von Parametern. Jeder davon ist als Schieberegler verfügbar, sodass der Artikel den Bedienelementen folgt, die Sie selbst im Lab ausprobieren können.
- Die Glocke wird Zeile für Zeile berechnet. Fünf Glockenformen verwenden fünf verschiedene Breitenkurven; ein Gesicht braucht nur ein bis drei Pixel pro Auge.
- Die Welt wird in ein Canvas gerendert, das ein Viertel der Größe des Viewports hat, und dann ohne Glättung wieder hochskaliert.
- Das Leuchten kommt aus einer Lichtkarte im Maßstab 1/16 mit quadratischem Abfall, abgestuften Lichtstufen und einer 4×4-Dither-Matrix.
Jedes Bild hier ist ein Screenshot aus dem Lab. Wir haben durchgehend dieselbe pfirsichfarbene Qualle verwendet, mit dem handgezeichneten Gesichts-Preset des Autors. Für den Artikel wurde nichts nachgestellt.
1. Die Figur ist eine Funktion
Eine Pixel-Art-Figur beginnt normalerweise in einem Bildbearbeitungsprogramm. Unsere begann mit einer Frage: Was ist die kleinste Beschreibung von „einer Qualle“, die es jemandem trotzdem erlaubt, seine eigene anders aussehen zu lassen als meine?
Die Antwort entpuppte sich als eine Breitenkurve. Die Glocke wird Zeile für Zeile von oben nach unten gezeichnet, und das Einzige, was sich zwischen einer Glocke, einem Dom, einem Klecks, einer Laterne und einem Tropfen ändert, ist die Funktion, die sagt, wie breit jede Zeile ist. Ein Dom öffnet sich schnell mit einer weichen Schulter; ein Klecks ist in der Mitte am breitesten und an beiden Enden eingeschnürt; eine Laterne öffnet sich im ersten Sechstel und zieht sich über das letzte Fünftel zusammen; ein Tropfen erreicht seine volle Breite etwa drei Viertel des Weges nach unten und wird dann schmaler; eine schlichte Glocke ist eine gerade Ausbreitung.
Unter der Kurve stehen zwei kleine Regeln. Der Schieberegler „Rundheit“ (1–4) entscheidet, wie viele Zeilen die Krone braucht, um sich auszubreiten. Jede Zeile hat außerdem eine ungerade Breite. Diese Mittelsäule ist wichtiger, als es klingt: Augen und Mund können genau in der Mitte sitzen statt ein halbes Pixel daneben.
Von hier aus folgt der Rest des Körpers. Breite, obere Breite, Höhe, Rundheit und Stauchung sind fünf Schieberegler. Weil die Form berechnet statt gespeichert wird, kann sich die Glocke auch verformen: Wenn Sie sie ziehen, neigt sich die Zeile, die Sie gegriffen haben, stärker als die Zeilen weit weg von Ihrem Cursor. Diese eine Regel ist es, die sie sich wie weiches Gummi statt wie eine starre Karte anfühlen lässt.
Die Rotation wird genauso gehandhabt, aber rückwärts: Statt Pixel vorwärts zu drehen (was Löcher hinterlassen würde), läuft der Renderer die gedrehte Bounding-Box ab, bildet jede Bildschirmzelle zurück in den Glockenraum ab und fragt: „Ist das innerhalb von Zeile r?“ Nearest-Neighbour, kein Anti-Aliasing, damit eine gekippte Qualle genauso scharf bleibt wie eine aufrechte.
Das Gesicht
Die Augen sitzen bei 54 % der Glockenhöhe, mit einem Abstand von 18 % der Glockenbreite. Diese beiden Verhältnisse sind das ganze Layoutsystem. Der Ausdruck ist dann nur noch, welche ein bis drei Pixel beleuchtet werden: ein Punkt, ein Strich, ein ^ oder ein Punkt, der um ein Pixel nach oben oder nach innen verschoben ist. Neugierig ist ein Auge etwas höher als das andere. Festgefahren sind beide Augen zur Nase geschoben. Schläfrig sind zwei Striche. Schwindelig — ausgelöst durch drei scharfe Wendungen innerhalb von 850 ms — sind zwei breite Striche und ein Wackeln.
Was das Gesicht überzeugend macht, sind nicht die Pixel, sondern wohin sie schauen. Die Augen sind der eine Teil des Körpers, der eigene Bewegungsregeln bekommt: Sie zucken ein Pixel gegen die Richtung, in die Sie die Glocke ziehen, und während Sie mit der Tastatur schwimmen, führen sie in die Wendung, bevor es der Körper tut. Der Mund erscheint nur, wenn die Qualle spricht oder eine Emotion zeigt; während sie spricht, öffnet und schließt er sich auf einer schnellen Sinuskurve. Nichts davon brauchte ein gezeichnetes Animationsbild.
Tentakel
Es gibt keine Oralarme und keine Tentakel-Sprites. Jeder Tentakel ist eine Kette quadratischer Perlen unter Verlet-Integration, verankert bei 28 % unterhalb der Glocke, mit drei Durchgängen von Distanzbeschränkungen pro Frame, um die Perlen auf ihrem „Abstands“-Wert zu halten. Was sie sich wie unter Wasser anfühlen lässt, sind drei Sinuswellen mit drei verschiedenen Frequenzen — eine langsame Drift, ein schnelleres Wiegen und eine zum Schwanz hin gewichtete Kräuselung —, sodass die Wurzeln ruhig bleiben und die Spitzen wogen. Bewegen Sie den Cursor durch sie hindurch, und sie teilen sich und wirbeln; halten Sie an, und sie beruhigen sich in ihrem eigenen Tempo.
Die Tentakel-Schieberegler (Anzahl 3–12, Segmente 4–18, Schwerkraft, Reibung, Spannung, Strömung, Kräuselung, Ausweichen) sind direkt verfügbar, und vier Ein-Klick-„Bewegungs-Presets“ — Still, Lebhaft, Wild, Drift — sind nichts weiter als vier gespeicherte Kombinationen dieser sechs Zahlen.
Farbe
Sieben dreifarbige Paletten sind standardmäßig enthalten — Glocke, Tentakel, Augen — plus freie Farbwähler für jede:
| Palette | Glocke | Tentakel | Augen |
|---|---|---|---|
| ocean | #8ae2ff | #8ae2ff | #303030 |
| sunset | #ffb38a | #ff8fc7 | #3a2a2a |
| lime | #b6f5a0 | #8ce6c0 | #26331f |
| grape | #c7a2ff | #a98cff | #2c2640 |
| rose | #ff9ec4 | #ffc0dd | #3a2630 |
| gold | #ffe08a | #ffd06a | #3a3320 |
| mono | #cfd8e3 | #aab4c2 | #20242b |
Die Glockenfarbe färbt nicht nur die Glocke. Die Engine schreibt sie in die Akzentvariable der Seite (und die Tentakelfarbe in den sekundären Akzent), sodass die gesamte Labor-UI auf die Qualle umgestellt wird, die du gerade baust. Schwarz, Weiß, Grautöne und das semantische Rot ändern sich nie; alles andere folgt dir. Und wie wir in Teil 3 sehen werden, wird sie auch zur Farbe des Lichts, das du trägst.
Wenn die prozedurale Glocke nicht ausreicht, kannst du sie abschalten und deine eigene auf einem 6×6- bis 28×28-Raster malen und bis zu acht eigene Gesichter obendrauf malen. Dreizehn unserer Teammitglieder haben genau das getan; ihre Quallen leben jetzt als NPCs in der Büroszene, jede mit eigenem Körper, eigener Tentakelanzahl, eigenem Ausdruck und eigenen Dialogzeilen.
2. Der Pixel-Look ist eine Auflösung
Der gängigste Weg, im Web einen „Pixel-Look“ zu erzielen, ist, in voller Auflösung zu rendern und nachzubearbeiten – Farben einrasten, ein Raster-Overlay hinzufügen, vielleicht verwischen und neu quantisieren. Wir haben das Gegenteil gemacht: Die Welt ist tatsächlich winzig. Sie wird in ein Canvas gezeichnet, das ein Viertel der Fenstergröße hat – eine Weltzelle entspricht bei Standard-Skalierung vier Bildschirmpixeln – und der Browser wird angewiesen, es ohne Glättung hochzuskalieren.
Jeder Draw-Call in der Engine schreibt gepackte 32-Bit-Farbwerte direkt in diesen kleinen Puffer – die Glocke, Tentakelperlen, Geländekacheln, sogar Text. Es gibt nirgendwo in der Weltebene einen Vektorpfad, also kann nichts versehentlich kantengeglättet werden. Positionen werden an jedem Ankerpunkt auf das Zellenraster gerundet: die Glockenspitze, die Augenreihe, jede Geländekachel, der von der Beleuchtungsmatrix verwendete Kamera-Offset.
Das hat eine schöne Konsequenz für den Regler „Pixelgröße“. Weil er ändert, wie viele Bildschirmpixel eine Weltzelle abdeckt (4 × 0,7 bis 4 × 1,6), ändert er in einem Zug sowohl die Körnung des Bildes als auch die scheinbare Größe der Qualle. Es gibt keinen separaten Zoom.
Zwei Canvases und eine Ebene aus echtem Text
Eine strukturelle Entscheidung, die uns besonders gefällt: Die Welt besteht aus zwei Canvases mit einer HTML-Ebene dazwischen. Raumböden und Titel werden auf das untere Canvas gemalt. Der Blog-artige Text, der im Büro lebt, ist gewöhnliches, auswählbares, barrierefreies HTML darüber. Das obere Canvas – Wasserwellen, Gegenstände, Portale, die Qualle selbst – lässt jede unberührte Zelle transparent, sodass Text durch das leere Wasser lesbar bleibt, die Qualle aber darüber hinwegschwimmt.
Das Ergebnis ist Text, der in die Szene eingelassen wirkt statt daraufgeklebt. Das Hintergrund-Canvas wird außerdem zwischengespeichert: Es wird nur neu gezeichnet, wenn sich die Kamera um eine ganze Zelle bewegt oder sich die Szene ändert.
Dithering, keine Verläufe
Wo das Bild einen Verlauf braucht – vor allem bei der Beleuchtung –, verwenden wir geordnetes Dithering statt sanfter Interpolation. Eine 4×4-Bayer-Matrix, indiziert nach Weltkoordinaten, damit das Muster beim Scrollen an Ort und Stelle bleibt, zerlegt das Licht in flache Bänder und streut dann die Nähte. „Lichtstufen“ ist als Regler verfügbar (2–8, Standard 3). Bei 2 sieht der Boden wie ein zweifarbiger Holzschnitt aus; bei 8 ist er nahezu glatt. Bei drei sieht er noch handgemacht aus.
Farbkorrektur – ein globaler Farbton- und Sättigungszug – läuft über eine 32×32×32-Lookup-Tabelle, die als Nebeneffekt die Palette still auf fünf Bit pro Kanal quantisiert. Jedes Vorschau-Canvas in der UI hat die Glättung aus; die einzige Stelle, an der die Engine einen CSS-Blur verwendet, sind UI-Übergänge, nie die Welt.
3. Das Glühen ist ein Lichtfeld
Eine Qualle, die nicht glüht, ist keine Qualle. Die naheliegende Umsetzung – ein weicher radialer Halo, über die Szene geblendet, oder ein Blur-Pass – wurde am ersten Tag verworfen, weil sie glatte Subpixel-Verläufe erzeugt, die auf einem harten Pixelraster falsch aussehen. Ein weicher Halo schwebt über der Welt; er gehört nicht zu ihr.
Statt also ein Glühen zu zeichnen, beleuchten wir den Raum. Jedes Licht – die Qualle, Lampen, leuchtende Gegenstände – wird in eine kleine Lichtkarte bei einem Viertel der Canvas-Auflösung (ein Sechzehntel des Bildschirms) gestempelt, mit einem (1 − d/r)²-Abfall: nicht physikalisch korrekt, aber weich, günstig und leicht abzustimmen. Der Boden und die Möbel werden dann umso stärker aufgehellt, je mehr Licht sie erreicht, in denselben drei flachen Stufen mit demselben Dithering. Es werden zwei Karten geführt – eine für den Boden und eine für Objekte mit 1,6× größerem Radius, damit Requisiten in einem etwas größeren Halo sitzen als der Boden unter ihnen.
Der Shading-Pass multipliziert jedes Pixel mit Umgebungslicht plus dem Lichtfeld, begrenzt auf eine Obergrenze. Diese Obergrenze – 1,25, das heißt, Licht kann eine Farbe auf 125 % ihrer selbst treiben und nicht weiter – ist das gesamte „Bloom“-Budget. Daher kommt der leicht überbelichtete Kern des Glühens, und darin liegt der Unterschied zwischen einer Laterne und einem Lens Flare.
Drei Implementierungsdetails übersieht man leicht:
- Die Glockenfarbe ist auch die Lichtfarbe. Wähle eine rosafarbene Qualle, und der nahe Boden wird rosafarben; derselbe Hex-Wert aktualisiert die Akzentfarbe des Labors.
- Farbe wird über ihren Spitzenkanal normalisiert, sodass eine dunkelmarinefarbene Glocke immer noch einen vollstarken marinefarbenen Farbton wirft, statt den Raum kaum zu beleuchten.
- Das Flackern aktualisiert alle 8 Frames. Ein leichtes Stocken passt besser zu dieser Pixelwelt als ein perfekt glattes Schimmern.
Eine weitere Regel verhindert, dass Lampen falsch aussehen: Alles, was Licht aussendet, wird davon ausgeschlossen, beleuchtet zu werden. Gegenstände mit einer Lichtkomponente werden mit einer Emissionsmaske gezeichnet, und der Shading-Pass kopiert diese Pixel unverändert durch – eine Lampe wird also nie durch ihr eigenes Umgebungslicht abgedunkelt.
Die Regler
All das ist im Panel Szene → Licht verfügbar. Das sind die Werte, mit denen wir am Ende ausgeliefert haben:
| Regler | Bereich | Standard |
|---|---|---|
| Umgebungshelligkeit | 0.2 – 1 | 0.55 |
| Umgebungsfarbe | — | #6d8fae |
| Lichtstufen | 2 – 8 | 3 |
| Obergrenze der Highlights | 1 – 1.5 | 1.25 |
| Qualle-Glühen · Radius | 8 – 80 | 32 |
| Qualle-Glühen · Stärke | 0 – 1.5 | 0.6 |
| Qualle-Glühen · Flackern | 0 – 0.6 | 0.05 |
Der Boden wird nur neu schattiert, wenn sich Level, Shader-Parameter oder Lichtpositionen ändern; Lichter außerhalb des Viewports werden aussortiert, bevor sie gestempelt werden; die Farbkorrekturtabelle wird zwischengespeichert. In der Praxis passt die ganze Welt – Hintergrund, Wassersimulation, Gegenstände, Tentakel, Beleuchtung, Qualle – bequem in einen einzigen Animationsframe auf einem Laptop, bei einer Auflösung, bei der ein 1440 px breites Fenster nur 360 Zellen breit ist.
4. Ein paar Dinge dazu, wie sie sich bewegt
Nicht unbedingt über das Aussehen, aber sie prägen, wie die Figur wirkt, also kurz:
- Tastatur-Schub baut sich auf und dämpft ab, begrenzt auf knapp unter einer Zelle pro Frame. Die Geschwindigkeit speist auch die Glockenverformung, sodass ein schnelles Schwimmen sie sichtbar gegen die „Strömung“ staucht.
- Eine Raststufe des Mausrads speist einen Impuls in dieselbe Geschwindigkeit wie die Tastatur und ergibt im eingeschwungenen Zustand eine Zelle Fortbewegung.
- Die Kamera folgt langsam, während du schwimmst, schneller beim Zurückkommen und sehr langsam für 1,6 Sekunden nach einem Ziehen, damit sie nicht zurückschnappt.
- Die horizontale Geschwindigkeit setzt eine Zielneigung. Eine steife, gedämpfte Feder folgt ihr und lässt die Glocke beim Anhalten leicht überschwingen.
- Der Cursor drückt Tentakelperlen innerhalb von 40 px weg. Innerhalb von 58 px fügt er außerdem einen Wirbel und einen radialen Puls hinzu, gewichtet zum Schwanz hin.
- Alle zwei Zellen der Fortbewegung fügt der 2D-Wellensimulation einen sanften Impuls hinzu. Diese Wellen können Items auslösen, die den Impuls weitergeben können.
5. Warum die Figur aus Daten besteht
Wir haben nicht mit einer Theorie über KI-Charaktere begonnen. Wir haben mit einem Quallen-Editor angefangen und dann einen praktischen Vorteil bemerkt: Dieselben Parameter, die die Figur anpassbar machen, machen sie auch für einen Agenten lesbar.
Parameter sind für einen Agenten einfacher zu verwenden
Ein Sprite-Sheet ist für ein Modell undurchsichtig. Unsere Qualle besteht aus etwa dreißig Zahlen und ein paar Enums – klein genug für einen Prompt, einen JSON-Blob oder einen Tool-Call.
- Ein Agent kann die Parameter lesen und weiß, wie die Qualle seines Nutzers aussieht.
- Er kann „mach mir eine verschlafene lila mit langen Tentakeln“ in ein Preset verwandeln, ohne ein neues Bild zu generieren. Der NPC jedes Teammitglieds ist eine Datenzeile statt ein Art-Asset.
- Ausdruck, Leuchten und Bewegung sind Laufzeitzustand, sodass das Maskottchen konzentriert wirken kann, während der Agent arbeitet, oder schwindelig, wenn er verwirrt ist.
- Die Parameter können stark variieren, während das Ergebnis immer noch wie dieselbe Art von Qualle aussieht.
Das ist der nützliche Teil für AirJelly. Das Maskottchen kann als Körper des Agenten fungieren, weil sein Aussehen und Verhalten Daten sind, die der Agent lesen und ändern kann. Wir müssen nie ein Modell bitten, ein undurchsichtiges Bild zu bearbeiten.
Warum wir Pixel (und ASCII) trotzdem mögen
Es gibt einen praktischen Grund. Ein Pixel-Sprite ist ein kleines Raster aus Palettenindizes; ASCII-Art ist bereits Text. Beides lässt sich kompakt beschreiben und Zelle für Zelle bearbeiten. Für die präzisen Änderungen, die wir brauchen, lässt ein 16×16-Sprite einem Modell einfach weniger Raum zum Improvisieren als ein Gemälde.
Es gibt auch einen subjektiveren Grund: Wir mögen harte Raster. Sie sind ehrlich darüber, von einer Maschine gemacht zu sein, und ein Ein-Pixel-Fehler wirkt oft charmant statt unheimlich. Dieser Ton passt zu einem Produkt über eine KI, die auf deinem Computer lebt. Vielleicht fühlen sich Terminals in KI-Tools auch deshalb so angenehm an.
Hier sind wir also gelandet: eine Figur, die durch Zahlen beschrieben und auf einem Raster gezeichnet wird. Sie sieht zufällig retro aus, aber der nützliche Teil ist, wie einfach sowohl ein Mensch als auch ein Agent sie präzise ändern können.
Eine letzte Sache. Wenn du im Labor eine Qualle abstimmst, die dir gefällt, exportiere ihre Parameter und schick sie an xiaohua@airjelly.ai – wir stellen sie auf die Website. Dreizehn leben bereits im Büro; es ist immer Platz für eine mehr.