starmen1265
22711cf946
三级层次化布局绘图 → AI 解读 → 关卡执行案前置输入 工具特性： - L1 场景总览（道路/水域/区域/不可通行）→ L2 区域详图（建筑/绿地） - 双层画布架构：L2 底图显示 L1 内容，绘图层独立操作 - L1↔L2 双向像素缩放同步 - 像素扫描提取连通区域（BFS），输出 bounds + 世界坐标 - JSZip 打包下载（JSON + 独立 PNG 像素文件 + 预览图） - 加载时从 ZIP 恢复完整画布像素数据 集成更新： - 新增 .claude/skills/world-sketcher/ 技能定义 - game-designer agent 添加 world-sketcher skill + 布局草图前置步骤 - 关卡设计工作流插入 ③a-③c 子流程
150 lines
4.3 KiB
Markdown
150 lines
4.3 KiB
Markdown
# World Layout Sketcher — 世界布局草图工具
|
||
|
||
> 在场景概念与关卡执行案之间，提供可视化布局沟通工具。
|
||
> 用颜色画笔绘制世界布局 → AI 解读 → 双方确认 → 产出执行案。
|
||
|
||
## 快速开始
|
||
|
||
1. 双击 `sketch.html` 在浏览器中打开（推荐 Chrome / Edge）
|
||
2. 左侧设置场景名称和世界尺寸（米）
|
||
3. 选择画笔，在画布上绘制
|
||
4. **双击** 已绘制区域 → 为该区域命名
|
||
5. 勾选「可进入」→ 创建下级详图（L1 → L2）
|
||
6. 保存 PNG + JSON
|
||
|
||
---
|
||
|
||
## 三级层次
|
||
|
||
| 层级 | 范围 | 绘制内容 | 说明 |
|
||
|------|------|---------|------|
|
||
| **L1** 场景总览 | ≤1km | 大区域、主干道、河流 | 鸟瞰全局，定位区域关系 |
|
||
| **L2** 区域详图 | ≤300m | 建筑、内部道路、绿化、水体 | 每个区域的详细布局 |
|
||
| **L3** 建筑内部 | 预留 | 拖放细节资产 | 未来版本 |
|
||
|
||
### 导航方式
|
||
|
||
- L1 画布上，双击已命名的区域并勾选「可进入」
|
||
- 左侧元素列表中点击 **"进入 →"**
|
||
- 面包屑导航点击 **"场景总览"** 返回上级
|
||
|
||
---
|
||
|
||
## 画笔图例
|
||
|
||
| 画笔 | 颜色 | 用途 | 对应 UE 材质 |
|
||
|------|------|------|-------------|
|
||
| 道路 Road | 灰 `#909090` | 道路、马路、小路 | MI_DevGray |
|
||
| 建筑 Building | 橙 `#E07020` | 建筑物 | MI_DevOrange |
|
||
| 水域 Water | 天蓝 `#40A0D0` | 河流、水塘、水体 | MI_DevSkyBlue |
|
||
| 植被 Greenery | 绿 `#40B040` | 树木、草地、绿化带 | MI_DevGreen |
|
||
| 不可通行 Blocked | 棕 `#A07040` | 山体、围墙、不可达区域 | MI_DevBrown |
|
||
| 区域 Zone | 红 `#D04040` | 区域边界、地块划分 | MI_DevRed |
|
||
| 橡皮擦 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": "v01",
|
||
"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_xxx", "type": "zone", "name": "城郊小街", "has_detail": true, "detail_ref": "L2-el_xxx" }
|
||
]
|
||
},
|
||
"L2-el_xxx": {
|
||
"world_size_m": [80, 60],
|
||
"elements": [
|
||
{ "id": "el_yyy", "type": "building", "name": "家", "has_detail": true }
|
||
],
|
||
"parent_level": "L1",
|
||
"parent_element": "el_xxx"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 工作流集成
|
||
|
||
在关卡设计流程中的位置：
|
||
|
||
```
|
||
场景概念 (场景-vXX.md)
|
||
↓
|
||
【World Layout Sketcher】 ← 本工具
|
||
↓
|
||
AI 布局解读文档 (场景名-layout-vXX.md)
|
||
↓ 用户确认
|
||
关卡执行案 (关卡-vXX-执行案.md)
|
||
↓
|
||
搭建指南 → Level Builder → UE5 关卡
|
||
```
|
||
|
||
### AI 解读流程
|
||
|
||
1. 用户在工具中画好布局，保存 PNG + JSON
|
||
2. 将 PNG 提供给 AI（Claude vision）
|
||
3. AI 分析颜色区域，结合 JSON 中的比例尺和命名信息
|
||
4. AI 产出结构化布局解读 Markdown（区域表、连通关系、待确认问题）
|
||
5. 用户确认后，策划基于解读文档产出关卡执行案
|
||
|
||
---
|
||
|
||
## 设计原则
|
||
|
||
- **强制使用预定义画笔**：无自由拾色器，保证每个像素都映射到已知地形类型
|
||
- **层次化设计**：L1 定大局，L2 定细节，L3 预留
|
||
- **人机共读**：PNG 供人和 AI 视觉分析，JSON 供程序化解析
|
||
- **与 Level Builder 一致**：画笔颜色直接映射 MI_Dev* 标识色材质
|