幕后揭秘：用 PixiJS 构建像素艺术办公室

为什么选择像素艺术办公室？

当我们开始构建 Office Claws 时，我们面临一个选择：制作一个带有表格和状态标签的标准仪表板，还是制作人们真正喜欢看的东西。我们选择了像素艺术办公室。

这个办公室不仅仅是装饰。它是代理状态的实时可视化。当代理正在处理任务时，你可以看到他们在工位上打字。当他们空闲时，他们会四处走动或在沙发上休息。它将抽象的"代理状态：活跃"变成了有形的东西。

技术栈

我们使用 PixiJS v8 构建了这个办公室，这是一个运行在 WebGL/WebGPU 上的 2D 渲染引擎。整个画布在 Angular 组件内以 60fps 渲染，嵌入在我们的 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 帧乒乓序列，每帧 120ms。方向由移动向量决定 — 如果 dx > 0，面朝右；如果 dy > 0，面朝下。

我们将帧纹理缓存在 Map 中，以避免每个 tick 创建新的 Texture 对象。这让垃圾回收器保持安静，维持流畅的 60fps 渲染。

模拟系统

OfficeSimulation 类为每个代理运行一个状态机：

1. 行走 — 代理走向他们的工位（在简单网格上的 A* 寻路）
2. 打字 — 代理工作 15-35 秒（2 帧交替动画）
3. 行走 — 代理站起来走向新的位置
4. 休息 — 20% 的概率走向沙发，80% 的概率返回工位
5. 重复

模拟在 PixiJS ticker 的更新循环中运行，每帧接收 deltaMs。窗口大小调整时，所有静止的代理都会使用新的布局计算重新定位。

定位系统

所有位置都定义为图像分数 — 相对于源背景图像的归一化坐标。例如：

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

这意味着"距离背景图像左边缘 25%，距离上边缘 52%。" toCanvas() 函数根据当前布局将这些分数转换为实际的像素坐标。

这种方法意味着位置可以在任何窗口大小或宽高比变化中保持正确，无需手动调整。

经验教训

1. 最近邻缩放对像素艺术至关重要。我们全局设置了 TextureSource.defaultOptions.scaleMode = 'nearest'
2. 帧缓存很重要 — 没有它，每帧创建新纹理会导致可见的 GC 暂停
3. 图像分数胜过像素坐标 — 使布局与分辨率无关
4. 状态机被低估了 — 一个简单的状态机就能让代理行为感觉出奇地生动

像素艺术办公室最初只是一个有趣的想法，后来成为了 Office Claws 独特之处的核心部分。它将基础设施管理从一项繁琐的任务变成了你想要观看的东西。