За кулисами: создание пиксельного офиса на PixiJS

Почему пиксельный офис?

Когда мы начинали создавать Office Claws, перед нами стоял выбор: сделать стандартный дашборд с таблицами и бейджами статусов или создать что-то, на что людям действительно приятно смотреть. Мы выбрали пиксельный офис.

Офис — это не просто украшение. Это визуализация состояния ваших агентов в реальном времени. Когда агент обрабатывает задачу, вы видите, как он печатает за своим столом. Когда он свободен, он гуляет по офису или отдыхает на диване. Это превращает абстрактный «статус агента: активен» в нечто осязаемое.

Технический стек

Мы построили офис с помощью PixiJS v8 — движка 2D-рендеринга, работающего на WebGL/WebGPU. Весь холст отрисовывается со скоростью 60 кадров в секунду внутри Angular-компонента, встроенного в наше десктопное приложение на Wails.

Ключевые компоненты

• Комната офиса — PNG-фон (640x700px), масштабированный под холст по алгоритму «contain»
• Спрайты агентов — Многослойные спрайты персонажей с тенью, телом, одеждой и причёской
• Система анимаций — Конечный автомат, управляющий покачиванием в покое, 4-направленной ходьбой, сидением и печатью
• Интерактивные зоны — Кликабельные области на карте офиса для принтера, столов и навигации

Спрайты персонажей

Каждый агент имеет уникальный внешний вид, сгенерированный из системы спрайт-листов:

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)

Анимации используют 4-кадровые пинг-понг-последовательности с частотой 120 мс на кадр. Направление определяется вектором движения — если dx > 0, персонаж поворачивается вправо; если dy > 0, поворачивается вниз.

Мы кешируем текстуры кадров в Map, чтобы не создавать новые объекты Texture каждый тик. Это сдерживает сборщик мусора и поддерживает плавный рендеринг на 60 кадрах в секунду.

Симуляция

Класс OfficeSimulation запускает конечный автомат для каждого агента:

1. Ходьба — Агент идёт к своему столу (поиск пути A* на простой сетке)
2. Печать — Агент работает 15-35 секунд (2-кадровая чередующаяся анимация)
3. Ходьба — Агент встаёт и идёт к новому месту
4. Отдых — 20% шанс пойти на диван, 80% шанс вернуться к столу
5. Повтор

Симуляция работает в цикле обновления тикера PixiJS, получая deltaMs каждый кадр. При изменении размера окна все неподвижные агенты перемещаются в соответствии с новыми расчётами макета.

Система позиционирования

Все позиции определены как доли изображения — нормализованные координаты относительно исходного фонового изображения. Например:

CHAIR_POSITIONS[0] = { xFrac: 0.25, yFrac: 0.52 }

Это означает «25% от левого края, 52% от верхнего края фонового изображения». Функция toCanvas() преобразует эти доли в реальные пиксельные координаты на основе текущего макета.

Такой подход позволяет позициям сохраняться при любом размере окна или соотношении сторон без ручной корректировки.

Извлечённые уроки

1. Масштабирование по ближайшему соседу обязательно для пиксельного арта. Мы глобально установили TextureSource.defaultOptions.scaleMode = 'nearest'
2. Кеширование кадров имеет значение — Без него создание новых текстур каждый кадр вызывало заметные паузы сборщика мусора
3. Доли изображения лучше пиксельных координат — Делают макет независимым от разрешения
4. Конечные автоматы недооценены — Простой конечный автомат делает поведение агента удивительно живым

Пиксельный офис начинался как забавная идея и стал ключевой частью того, что делает Office Claws особенным. Он превращает управление инфраструктурой из рутины в нечто, за чем хочется наблюдать.