把参数化 3D 建筑一键渲染成 2D 俯视像素图的本地网页工具。

• 内置 10 种建筑风格、46 种建筑类型，支持正交 / 透视、多角度、精灵表导出。
• 纯前端、零依赖、不联网：不依赖 Godot，不需要启动服务器，双击即可用。
• 配套 Godot 插件 addons/hd2d_scene_tools（v5/v6 配方），按相同几何与参数移植。

普通出图不需要 Node.js、Python，也不需要任何 npm install。js/atlases.js 体积较大（约 7.6 MB）是因为内嵌了 10 套图集，目的是让你在 file:// 下双击也能读到像素数据。

使用 Chrome 或 Edge（推荐）。少数浏览器在 file:// 下会限制内嵌数据解码，改用本地服务器即可（见「常见问题」）。

方式 A：双击打开（最简单）

1. 下载并解压整个项目文件夹。
2. 双击 启动工具.bat（或 index.html），会用默认浏览器打开工具。
3. 推荐窗口分辨率 1600×1000 以上。

方式 B：本地服务器（如遇到空白页）

cd 参数化topdown建筑
python -m http.server 8000
:: 浏览器访问 http://localhost:8000/

打开后：

• 左侧选「风格」和「建筑类型」，右侧实时预览。
• 滚轮缩放、拖拽平移、双击复位预览画面。

1. 选风格 / 建筑

   • 左侧「风格」下拉选 10 种内置风格之一（江南古镇、欧式、日式町屋、中式宫阙、哥特、蒸汽工业……）。
   • 下方选建筑类型与参数（宽 / 深 / 楼层 / 坡度 / 窗列 / 屋顶形态等），或点「随机建筑」。

2. 调视角

   • 投影：正交（无透视）或透视（设 FOV）。
   • 俯角、方向数（1/2/4/8）、画面尺寸、留白、描边、背景等按需调整。

3. 导出

   • 「② 导出当前方向」：存单张 PNG。
   • 「③ 导出全部方向」：打包 ZIP，内含 dir_0.png … dir_N.png、sheet.png（精灵表）、recipe.json（配方）。
   • 「下载图集模板」：导出当前风格 4×4 图集，方便画师重绘后重新导入。

4. 自定义风格（风格工坊）

   • 点顶部「风格工坊」，上传自己的 4×4 图集（或逐角色单图 / 调色板），另存为新风格。
   • 点预览画面的任意部位，可查看该部件纹理、单独染色 / 换图 / 描边 / 重置，并写进配方。

所有参数会自动保存在浏览器 localStorage，刷新不丢。

• 正方形 PNG，边长能被 4 整除，建议 512（128px/格） 或 1024（256px/格）。
• 4×4 = 16 格，顺序固定：

• 可平铺角色（除 door/window/sign/shutter/wall_base/roof_edge 外）需四方连续。
• 用像素块表达明暗，不要依赖平滑渐变；透明像素会露底，请补满 alpha。
• 上传时会自动校验：是否正方形、是否能被 4 整除、每格是否为空 / 接近纯色。

双击后浏览器空白 / 脚本不执行？ 请用 Chrome 或 Edge；或在目录里运行 python -m http.server 8000 后访问 http://localhost:8000/。

样式保存在哪里？ 保存在浏览器 localStorage。换浏览器或清理数据会丢，请用「导出全部风格」备份成 JSON（含内嵌图集），可在另一台机器「导入风格包」。

为什么像素风看起来有点软？ 关掉「抗锯齿」，并把画面尺寸设成与最终放大倍数匹配的值（例如 256 再整数放大 3×）。

种子和 Godot 里不一样？ 几何参数完全一致，但随机序列实现不同（PCG32 播种细节不同）。要与 Godot 完全一致，请以本工具导出的 recipe.json 为准重建。

能批量出图吗？ 网页端一次导出当前建筑的全部方向；批量多建筑可在 Node 中复用 js/ 模块循环调用（见 tools/test_all_types.js）。

参数化topdown建筑/
├─ index.html              页面骨架（参数面板 / 预览 / 风格工坊）
├─ 启动工具.bat            用默认浏览器打开 index.html
├─ css/app.css             界面样式
├─ js/                     核心逻辑（几何 / 材质 / 光栅化 / 界面）
├─ samples/                示例输出与界面截图
└─ tools/                  开发自测（不影响普通使用，见下）

普通用户可忽略本节。以下脚本仅用于维护 / 验证源码，需要对应运行时：

:: 几何 / 渲染 / 采样自测（需要 Node 18+）
node tools/selftest.js
node tools/test_nearest.js
node tools/test_all_types.js
node tools/test_views.js
node tools/ui_test.js        :: 需要本机 Chrome / Edge

:: 从 Godot 插件重新生成目录与图集（需要 Python + Pillow）
pip install Pillow
python tools/build_assets.py
:: 也可指定插件目录：
python tools/build_assets.py --addon "<插件>\addons\hd2d_scene_tools"

tools/ 下的脚本不参与出图，删掉也不影响普通用户使用。

• 欢迎 Issue / Pull Request。提交代码前请先跑一遍 tools/ 自测确保无回归。
• 本项目为 Godot 插件 hd2d_scene_tools 的网页移植版，引用其几何与参数规范，请遵守其相应许可。
• 图集素材如涉及第三方版权，请在使用 / 分发前自行确认授权。

祝出图愉快 🏯