# World Layout Sketcher — 世界布局草图工具

> 在场景概念与关卡执行案之间，提供可视化布局沟通工具。
> 用颜色画笔绘制世界布局 → AI 解读 → 双方确认 → 产出执行案。

## 快速开始

1. 双击 `sketch.html` 在浏览器中打开（推荐 Chrome / Edge）
2. 左侧设置场景名称和世界尺寸（米）
3. 选择画笔，在画布上绘制
4. **双击** 已绘制区域 → 弹出命名对话框：
   - 输入名称（如"家"、"小卖部"）
   - 设置**高度**（建筑/区域/不可通行类型时显示，默认 3m）
   - 勾选**连通到**其他已命名区域（建立区域间连接关系）
   - 勾选「可进入」→ 创建下级详图（L1 → L2）
5. 保存 ZIP（含 PNG + JSON）

---

## 三级层次

| 层级 | 范围 | 绘制内容 | 说明 |
|------|------|---------|------|
| **L1** 场景总览 | ≤1km | 大区域、主干道、河流 | 鸟瞰全局，定位区域关系 |
| **L2** 区域详图 | ≤300m | 建筑、内部道路、绿化、水体 | 每个区域的详细布局 |
| **L3** 建筑内部 | 预留 | 拖放细节资产 | 未来版本 |

### 导航方式

- L1 画布上，双击已命名的区域并勾选「可进入」
- 左侧元素列表中点击 **"进入 →"**
- 面包屑导航点击 **"场景总览"** 返回上级

---

## 画笔图例

| 画笔 | 颜色 | 用途 | 对应 UE 材质 | 默认高度 |
|------|------|------|-------------|---------|
| 道路 Road | 灰 `#909090` | 道路、马路、小路 | MI_DevGray | — |
| 建筑 Building | 橙 `#E07020` | 建筑物 | MI_DevOrange | 3m |
| 水域 Water | 天蓝 `#40A0D0` | 河流、水塘、水体 | MI_DevSkyBlue | — |
| 植被 Greenery | 绿 `#40B040` | 树木、草地、绿化带 | MI_DevGreen | 2m |
| 不可通行 Blocked | 棕 `#A07040` | 山体、围墙、不可达区域 | MI_DevBrown | 3m |
| 区域 Zone | 红 `#D04040` | 区域边界、地块划分 | MI_DevRed | 3m |
| 橡皮擦 Eraser | — | 擦除 | — | — |

**L1 层**主要用：区域、道路、水域
**L2 层**主要用：建筑、道路、植被、水域、不可通行

---

## 绘图工具

| 工具 | 快捷键 | 说明 |
|------|--------|------|
| 画笔 | P | 自由绘制，按住鼠标拖动 |
| 矩形 | R | 绘制矩形区域，拖动定义两角 |
| 橡皮擦 | E | 擦除画布内容 |

| 操作 | 快捷键 |
|------|--------|
| 撤销 | Ctrl+Z |
| 重做 | Ctrl+Y |
| 网格开关 | G |

---

## 坐标系

- **原点**：画布左下角（西南角）
- **X+**：向右（东）
- **Y+**：向上（北）
- **单位**：厘米（与 UE5 一致，1 uu = 1 cm）
- 画布顶部 = 世界最大 Y，画布底部 = 世界 Y=0

状态栏实时显示鼠标位置的世界坐标。

---

## 输出文件

保存全部时生成：

```
<场景名>-L1-overview.png    # L1 画布截图
<场景名>-scene.json          # 完整场景数据（所有层级）
```

### scene.json 结构

```json
{
  "scene_name": "城郊小街",
  "version": "v02",
  "origin": "SW corner, X+ East, Y+ North",
  "brush_legend": { "色值": { "type": "类型", "mi_material": "MI_Dev*" } },
  "levels": {
    "L1": {
      "world_size_m": [500, 400],
      "canvas_size_px": [1000, 800],
      "scale_m_per_px": 0.5,
      "elements": [
        { "id": "el_001", "type": "zone", "name": "家", "height_m": 3,
          "connections": ["el_003"], "has_detail": false },
        { "id": "el_002", "type": "zone", "name": "小卖部", "height_m": 3,
          "connections": ["el_003"], "has_detail": false },
        { "id": "el_003", "type": "zone", "name": "主街道", "height_m": 3,
          "connections": ["el_001", "el_002", "el_004"], "has_detail": true, "detail_ref": "L2-el_003" }
      ],
      "regions": [
        { "id": "r_001", "type": "zone", "name": "家",
          "bounds_world_m": [5.0, 5.0, 12.5, 15.0], "area_px": 15000 }
      ]
    },
    "L2-el_003": {
      "world_size_m": [80, 60],
      "elements": [
        { "id": "el_yyy", "type": "building", "name": "家", "height_m": 3, "connections": [], "has_detail": false }
      ],
      "parent_level": "L1",
      "parent_element": "el_003"
    }
  }
}
```

---

## 工作流集成

在关卡设计流程中的位置：

```
场景概念 (场景-vXX.md)
    ↓
【World Layout Sketcher】  ← 本工具
    ↓
AI 布局解读文档 (场景名-layout-vXX.md)
    ↓ 用户确认
关卡执行案 (关卡-vXX-执行案.md)
    ↓
搭建指南 → Level Builder → UE5 关卡
```

### AI 解读流程

1. 用户在工具中画好布局，命名区域，设置高度和连通关系，保存 ZIP
2. AI 读取 JSON 布局数据（elements + regions + connections + height_m）
3. AI 交叉参考场景设计案的氛围描述，将 JSON 数据与场景概念建立映射
4. AI 产出结构化布局解读 Markdown（区域表、连通关系、高度、待确认问题）
5. 用户确认后，策划基于解读文档产出关卡执行案

> **说明**：PNG 文件保存在 ZIP 中用于画布的保存/加载，AI 分析以 JSON 结构化数据为准，不依赖 PNG 像素分析。

---

## 设计原则

- **强制使用预定义画笔**：无自由拾色器，保证每个像素都映射到已知地形类型
- **结构化数据优先**：高度和连通关系由用户直接输入，AI 无需从图像推断
- **层次化设计**：L1 定大局，L2 定细节，L3 预留
- **人机共读**：PNG 供人视觉确认，JSON 供 AI 和程序化解析
- **与 Level Builder 一致**：画笔颜色直接映射 MI_Dev* 标识色材质