在线联机原型全集：第 5 章　你画我猜（Pictionary / 白板协作）

你画我猜（Pictionary / 白板协作）

• 类别：多人协作 + 实时绘图原型
• 目标：验证二进制绘图流、快照 + 增量同步、内容审核、流量控制与 CRDT 协同一致性。
• 原型代号：proto-005-pictionary
• 依赖模块：proto-001-echo-chatroom, proto-004-trivia-buzzer
• 推荐语言栈：Go + WebSocket + WebRTC（可选）
• 网络协议：WebSocket（二进制帧）

一、概述（Overview）

“你画我猜（Pictionary）”是一种极佳的多人实时互动验证原型。
它同时涉及：

• 双向实时流传输（画面增量广播）；
• 多用户状态维护（谁在画、谁在猜、谁在旁观）；
• 数据带宽管理（防止过量数据堵塞）；
• 内容审核与过滤（图形、文字、敏感词检测）；
• 协同一致性（不同客户端绘制状态保持一致）；
• 回放与导出（保存绘图历史重放）。

在技术层面上，这个原型代表了「实时同步」体系的成熟阶段，
在游戏、教育、办公协作（如 Miro、Jamboard）、以及多人美术工具中均有广泛应用。

二、核心玩法与系统目标（Gameplay & Objectives）

2.1 游戏规则（简版）

• 房主或系统指定一名玩家为“画者”；
• 画者在白板上绘制提示内容（例如一个词语、物品、动物）；
• 其他玩家实时观看画面流并输入猜测；
• 猜中者获得积分；
• 回合结束后换画者；
• 全部轮完后结算总分。

2.2 系统验证目标

三、系统架构设计（Architecture）

graph TD
A[Client Drawer] -->|Binary Stream| B[Gateway]
A2[Client Guessers] -->|Realtime View| B
B --> C[RoomService]
C --> D[WhiteboardEngine]
D --> E[CRDT Merge Layer]
D --> F[AuditService]
F --> G[AI Filter / OCR]
D --> H[ReplayLogger]

模块说明

四、功能模块详解（Functional Modules）

4.1 WhiteboardEngine（绘图引擎）

功能描述

• 接收来自“画者”的二进制笔迹数据；
• 按时间戳存储绘制命令；
• 增量广播到所有观众；
• 支持快照（snapshot）保存。

数据结构

type DrawCommand struct {
  ID        int64
  X, Y      float32
  Color     string
  Thickness int
  Op        string // begin, draw, end
  Timestamp int64
}

压缩机制

• 将多条 DrawCommand 打包成单帧；
• 使用 MessagePack / Protobuf 编码；
• 帧大小上限：32 KB；
• 以 30 FPS 频率发送（约 33ms 一帧）。

4.2 CRDT Merge Layer（协同一致性）

背景

多用户同时在同一白板绘制时可能产生冲突：
例如两个用户在同一像素绘制不同颜色。

解决方案：

采用 CRDT（Conflict-Free Replicated Data Type） 模型，
基于操作日志合并策略：

[
merge(op_a, op_b) = \text{max_timestamp}(op_a, op_b)
]

每个绘制命令附带唯一 op_id 与 timestamp，
服务器根据时间戳与优先级合并状态，保持最终一致。

4.3 AuditService（内容审核）

审核内容

1. 图像识别（OCR + 图像分类）；
2. 敏感词检测；
3. 猜测消息过滤。

审核机制

• 绘制帧异步上报至审核队列；
• 审核结果异步回写；
• 审核延迟 < 1s；
• 敏感图像立即模糊处理。

graph LR
A[WhiteboardEngine] --> B[AuditQueue]
B --> C[AI Filter]
C --> D[AuditResult]
D --> A

4.4 ReplayLogger（回放系统）

事件日志模型

{
  "room_id": "wb-001",
  "commands": [
    {"op":"begin","x":10,"y":20,"t":1730690100},
    {"op":"draw","x":15,"y":25,"t":1730690101},
    {"op":"end","x":18,"y":27,"t":1730690102}
  ],
  "guesses": [
    {"uid":"A","text":"apple","time":1730690103}
  ]
}

重放机制

• 每条命令带时间戳；
• 回放系统按时间顺序播放；
• 支持倍速播放与暂停；
• 可导出 MP4 / GIF。

4.5 GuessingSystem（猜词模块）

• 接收猜测消息；
• 实时广播；
• 正确匹配触发结算；
• 支持提示词渐显（hint system）；
• 反作弊：服务端仅匹配词根（例如 “apple” == “Apples”）。

4.6 带宽与节流控制（Bandwidth Control）

五、状态机（State Machine）

stateDiagram-v2
  [*] --> Waiting
  Waiting --> Drawing: 选定画者
  Drawing --> Guessing: 广播题目
  Guessing --> Judging: 有人答对或超时
  Judging --> Result: 显示结果
  Result --> Drawing: 下一轮

六、流程图（Sequence Diagram）

sequenceDiagram
ClientDrawer->>Gateway: start_draw()
Gateway->>WhiteboardEngine: send(binary frame)
WhiteboardEngine->>CRDT: merge(op)
WhiteboardEngine->>Clients: broadcast(delta)
ClientGuesser->>Gateway: send_guess("apple")
Gateway->>Judge: check_answer()
Judge->>Clients: announce_winner()
WhiteboardEngine->>ReplayLogger: persist_frame()

七、数据模型（Data Schema）

八、验证指标（Metrics & KPI）

九、扩展功能（Extensions）

1. AI 自动绘制提示

   • 服务器使用生成模型（例如 Stable Diffusion）自动画提示图。

2. 白板回放导出工具

   • 将事件流转换为 MP4 动画；
   • 支持倍速与时间跳转。

3. 多人协作模式

   • 支持同时多画者；
   • CRDT 确保合并一致。

4. 延迟补偿算法

   • 客户端缓存前几帧绘制；
   • 延迟抵消后再渲染（时间插值）。

5. 语音输入 + 自动生成绘图

   • 语音识别转文字；
   • GPT 自动生成对应图形。

十、技术选型与实现建议（Tech Stack）

十一、压测与运维（Load & Ops）

监控指标：

• draw_frames_total
• audit_delay_ms
• bandwidth_usage_bytes
• crdt_merge_total
• replay_export_total

十二、设计反思与演化（Reflection & Evolution）

12.1 设计哲学

“你画我猜”首次让系统进入了实时协作维度。
从此之后，世界不再只是“状态”，而是“连续变化的过程”。
这意味着：

• 你不再仅验证结果；
• 你要保证过程的一致性；
• 你要对每一帧都能回放、可审计、可验证。

12.2 关键难点

• 流量与延迟平衡；
• 审核延迟与实时性的冲突；
• CRDT 实现复杂度；
• 前端插值渲染稳定性。

12.3 下一阶段演化

十三、总结

“你画我猜”代表了「实时协作系统」的第一个完整形态。
它让我们进入了一个新领域：

从离散事件到连续流、从状态一致到过程一致、从通信到协作。

这不仅是一个小游戏，更是一种架构思想的实验：
CRDT + 流式同步 + 审核 + 回放
构成了所有协作类应用（白板、文档、地图编辑器、多人建造游戏）的通用骨架。

如果聊天室是“连接的起点”，
那么白板协作就是“内容的起点”。