Pourquoi un Bureau en Pixel Art ?
Lorsque nous avons commencé à construire Office Claws, nous avions le choix : créer un tableau de bord standard avec des tableaux et des badges de statut, ou créer quelque chose que les gens aimeraient vraiment regarder. Nous avons choisi le bureau en pixel art.
Le bureau n'est pas qu'une simple décoration. C'est une visualisation en temps réel des états de vos agents. Quand un agent traite une tâche, vous le voyez taper à son bureau. Quand il est inactif, il se promène ou se repose sur le canapé. Cela transforme l'abstrait "statut de l'agent : actif" en quelque chose de tangible.
La Stack Technique
Nous avons construit le bureau avec PixiJS v8, un moteur de rendu 2D qui fonctionne sur WebGL/WebGPU. L'ensemble du canvas se rend à 60fps dans un composant Angular, intégré dans notre application de bureau Wails.
Composants Clés
- Salle de Bureau — Une image de fond PNG (
640x700px) mise à l'échelle pour s'adapter au canvas avec un algorithme "contain" - Sprites d'Agents — Sprites de personnages en couches avec ombre, corps, tenue et couches de cheveux
- Système d'Animation — Machine à états pilotant le balancement au repos, la marche en 4 directions, la position assise et les animations de frappe
- Zones Interactives — Zones cliquables sur la carte du bureau pour l'imprimante, les bureaux et la navigation
Sprites de Personnages
Chaque agent a une apparence unique générée à partir d'un système de sprite sheets :
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)
Les animations utilisent des séquences pingpong de 4 frames à 120ms par frame. La direction est déterminée par le vecteur de mouvement — si dx > 0, regarder à droite ; si dy > 0, regarder vers le bas.
Nous mettons en cache les textures de frames dans un Map pour éviter de créer de nouveaux objets Texture à chaque tick. Cela maintient le ramasse-miettes au calme et assure un rendu fluide à 60fps.
La Simulation
La classe OfficeSimulation exécute une machine à états pour chaque agent :
- Marche — L'agent marche vers son bureau (pathfinding A* sur une grille simple)
- Frappe — L'agent travaille pendant 15-35 secondes (animation alternée de 2 frames)
- Marche — L'agent se lève et marche vers un nouvel emplacement
- Repos — 20% de chance d'aller au canapé, 80% de chance de retourner au bureau
- Répéter
La simulation s'exécute dans la boucle de mise à jour du ticker PixiJS, recevant deltaMs à chaque frame. Lors du redimensionnement de la fenêtre, tous les agents stationnaires sont repositionnés en utilisant les nouveaux calculs de mise en page.
Système de Positionnement
Toutes les positions sont définies comme des fractions d'image — des coordonnées normalisées relatives à l'image de fond source. Par exemple :
CHAIR_POSITIONS[0] = { xFrac: 0.25, yFrac: 0.52 }Cela signifie "25% depuis le bord gauche, 52% depuis le bord supérieur de l'image de fond." Une fonction toCanvas() convertit ces fractions en coordonnées pixel réelles basées sur la mise en page actuelle.
Cette approche signifie que les positions survivent à tout changement de taille de fenêtre ou de rapport d'aspect sans ajustement manuel.
Leçons Apprises
- Le scaling nearest-neighbor est essentiel pour le pixel art. Nous avons défini
TextureSource.defaultOptions.scaleMode = 'nearest'globalement - Le cache des frames compte — Sans lui, la création de nouvelles textures à chaque frame provoquait des pauses visibles du GC
- Les fractions d'image battent les coordonnées en pixels — Rend la mise en page indépendante de la résolution
- Les machines à états sont sous-estimées — Une simple machine à états rend le comportement des agents étonnamment vivant
Le bureau en pixel art a commencé comme une idée amusante et est devenu un élément central de ce qui rend Office Claws différent. Il transforme la gestion d'infrastructure d'une corvée en quelque chose que vous avez envie de regarder.