Warum ein Pixel-Art-Büro?
Als wir mit der Entwicklung von Office Claws begannen, hatten wir die Wahl: ein Standard-Dashboard mit Tabellen und Status-Badges erstellen oder etwas, das die Leute wirklich gerne anschauen würden. Wir haben uns für das Pixel-Art-Büro entschieden.
Das Büro ist nicht nur Dekoration. Es ist eine Echtzeit-Visualisierung der Zustände Ihrer Agenten. Wenn ein Agent eine Aufgabe bearbeitet, sehen Sie ihn an seinem Schreibtisch tippen. Wenn er inaktiv ist, läuft er herum oder ruht sich auf dem Sofa aus. Es verwandelt das abstrakte "Agentenstatus: aktiv" in etwas Greifbares.
Der Tech Stack
Wir haben das Büro mit PixiJS v8 entwickelt, einem 2D-Rendering-Engine, der auf WebGL/WebGPU läuft. Das gesamte Canvas rendert mit 60fps in einer Angular-Komponente, eingebettet in unsere Wails-Desktop-App.
Hauptkomponenten
- Büroraum — Ein PNG-Hintergrundbild (
640x700px), das mit einem "Contain"-Algorithmus auf das Canvas skaliert wird - Agenten-Sprites — Mehrschichtige Charakter-Sprites mit Schatten-, Körper-, Outfit- und Haar-Ebenen
- Animationssystem — Zustandsmaschine, die Leerlauf-Wippen, 4-Richtungs-Gehen, Sitzen und Tipp-Animationen steuert
- Interaktive Zonen — Klickbare Bereiche auf der Bürokarte für Drucker, Schreibtische und Navigation
Charakter-Sprites
Jeder Agent hat ein einzigartiges Aussehen, das aus einem Sprite-Sheet-System generiert wird:
Avatar ID (1-12) → skinRow, hairRow, outfitIndex
↓
Shadow layer → Body layer → Outfit layer → Hair layer
↓
Composite sprite at 2x scale, anchor at (0.5, 1.0)
Animationen verwenden 4-Frame-Pingpong-Sequenzen mit 120ms pro Frame. Die Richtung wird durch den Bewegungsvektor bestimmt — wenn dx > 0, nach rechts schauen; wenn dy > 0, nach unten schauen.
Wir cachen Frame-Texturen in einer Map, um zu vermeiden, dass bei jedem Tick neue Texture-Objekte erstellt werden. Das hält den Garbage Collector ruhig und sorgt für flüssiges 60fps-Rendering.
Die Simulation
Die Klasse OfficeSimulation führt eine Zustandsmaschine für jeden Agenten aus:
- Gehen — Agent geht zu seinem Schreibtisch (A*-Pathfinding auf einem einfachen Raster)
- Tippen — Agent arbeitet 15-35 Sekunden (2-Frame-Wechselanimation)
- Gehen — Agent steht auf und geht zu einem neuen Ort
- Ruhen — 20% Chance zum Sofa zu gehen, 80% Chance zum Schreibtisch zurückzukehren
- Wiederholen
Die Simulation läuft in der Update-Schleife des PixiJS-Tickers und erhält deltaMs pro Frame. Bei Fenstergrößenänderungen werden alle stationären Agenten mit den neuen Layout-Berechnungen neu positioniert.
Positionierungssystem
Alle Positionen werden als Bildbruchteile definiert — normalisierte Koordinaten relativ zum Quell-Hintergrundbild. Zum Beispiel:
CHAIR_POSITIONS[0] = { xFrac: 0.25, yFrac: 0.52 }Das bedeutet "25% vom linken Rand, 52% vom oberen Rand des Hintergrundbilds." Eine toCanvas()-Funktion konvertiert diese Bruchteile in tatsächliche Pixelkoordinaten basierend auf dem aktuellen Layout.
Dieser Ansatz bedeutet, dass Positionen jede Fenstergrößen- oder Seitenverhältnisänderung ohne manuelle Anpassung überstehen.
Gelernte Lektionen
- Nearest-Neighbor-Skalierung ist essentiell für Pixel Art. Wir haben
TextureSource.defaultOptions.scaleMode = 'nearest'global gesetzt - Frame-Caching ist wichtig — Ohne es verursachte das Erstellen neuer Texturen pro Frame sichtbare GC-Pausen
- Bildbruchteile schlagen Pixelkoordinaten — Macht das Layout auflösungsunabhängig
- Zustandsmaschinen sind unterschätzt — Eine einfache Zustandsmaschine lässt das Agentenverhalten überraschend lebendig wirken
Das Pixel-Art-Büro begann als eine lustige Idee und wurde zu einem Kernbestandteil dessen, was Office Claws besonders macht. Es verwandelt Infrastrukturmanagement von einer lästigen Pflicht in etwas, das man gerne beobachtet.