¿Por Qué una Oficina en Pixel Art?
Cuando comenzamos a construir Office Claws, teníamos una opción: hacer un panel estándar con tablas e indicadores de estado, o hacer algo que la gente realmente disfrutara mirar. Elegimos la oficina en pixel art.
La oficina no es solo decoración. Es una visualización en tiempo real de los estados de tus agentes. Cuando un agente está procesando una tarea, lo ves escribiendo en su escritorio. Cuando está inactivo, camina por ahí o descansa en el sofá. Transforma el abstracto "estado del agente: activo" en algo tangible.
El Stack Tecnológico
Construimos la oficina usando PixiJS v8, un motor de renderizado 2D que funciona con WebGL/WebGPU. Todo el canvas se renderiza a 60fps dentro de un componente Angular, integrado en nuestra aplicación de escritorio Wails.
Componentes Clave
- Sala de Oficina — Una imagen de fondo PNG (
640x700px) escalada para ajustarse al canvas usando un algoritmo "contain" - Sprites de Agentes — Sprites de personajes en capas con sombra, cuerpo, atuendo y capas de cabello
- Sistema de Animación — Máquina de estados que controla el balanceo en reposo, caminata en 4 direcciones, sentado y animaciones de escritura
- Zonas Interactivas — Áreas clicables en el mapa de la oficina para la impresora, escritorios y navegación
Sprites de Personajes
Cada agente tiene una apariencia única generada a partir de un sistema 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)
Las animaciones usan secuencias pingpong de 4 frames a 120ms por frame. La dirección se determina por el vector de movimiento — si dx > 0, mira a la derecha; si dy > 0, mira hacia abajo.
Cacheamos las texturas de los frames en un Map para evitar crear nuevos objetos Texture en cada tick. Esto mantiene al recolector de basura tranquilo y mantiene un renderizado fluido a 60fps.
La Simulación
La clase OfficeSimulation ejecuta una máquina de estados para cada agente:
- Caminando — El agente camina a su escritorio (pathfinding A* en una grilla simple)
- Escribiendo — El agente trabaja durante 15-35 segundos (animación alternante de 2 frames)
- Caminando — El agente se levanta y camina a una nueva ubicación
- Descansando — 20% de probabilidad de ir al sofá, 80% de probabilidad de regresar al escritorio
- Repetir
La simulación se ejecuta en el bucle de actualización del ticker de PixiJS, recibiendo deltaMs en cada frame. Al redimensionar la ventana, todos los agentes estacionarios se reposicionan usando los nuevos cálculos de diseño.
Sistema de Posicionamiento
Todas las posiciones se definen como fracciones de imagen — coordenadas normalizadas relativas a la imagen de fondo fuente. Por ejemplo:
CHAIR_POSITIONS[0] = { xFrac: 0.25, yFrac: 0.52 }Esto significa "25% desde el borde izquierdo, 52% desde el borde superior de la imagen de fondo." Una función toCanvas() convierte estas fracciones a coordenadas de píxeles reales basándose en el diseño actual.
Este enfoque significa que las posiciones sobreviven a cualquier cambio de tamaño de ventana o relación de aspecto sin ajustes manuales.
Lecciones Aprendidas
- El escalado nearest-neighbor es esencial para el pixel art. Configuramos
TextureSource.defaultOptions.scaleMode = 'nearest'globalmente - El cacheo de frames importa — Sin él, crear nuevas texturas en cada frame causaba pausas visibles del GC
- Las fracciones de imagen superan a las coordenadas en píxeles — Hace que el diseño sea independiente de la resolución
- Las máquinas de estados están subestimadas — Una máquina de estados simple hace que el comportamiento del agente se sienta sorprendentemente vivo
La oficina en pixel art comenzó como una idea divertida y se convirtió en una parte fundamental de lo que hace que Office Claws se sienta diferente. Transforma la gestión de infraestructura de una tarea tediosa en algo que quieres observar.