等距场景编辑器——自行编辑2D瓦片场景地图

一个可嵌入任何 UrhoX 项目的完整等距瓦片地图编辑器，适用于 RPG、策略、模拟经营等类型游戏的关卡设计。

编辑器采用三栏布局：

六种工具覆盖了地图编辑的完整工作流——从逐格绘制到区域填充、从精确选取到批量操作，适应不同粒度的编辑需求。

每种工具在悬停时会显示不同颜色的高亮提示，方便识别当前处于哪种工具模式。

编辑器支持制作两种不同视角的游戏场景：等距侧视（Isometric）和正视俯视（Top-down）。等距视角适用于 RPG、策略等需要立体透视感的游戏；正视视角适用于俯视角冒险、Roguelike 等以方格为基础的游戏。同一份地图数据可以在两种视角下编辑和预览，方便开发者根据游戏类型选择最终呈现方式。

工具栏中有一个 视图切换按钮，点击即可切换：

切换时相机会自动重置到初始位置。两种视角下所有编辑工具、图层操作、保存加载功能完全一致。

调色板分为"颜色瓦片"和"图片瓦片"两类。颜色瓦片用于快速原型设计（不需要美术素材就能标注地形类型），图片瓦片用于正式美术素材的编辑。

编辑器内置 5 种预定义颜色瓦片，点击即可选中并自动切换到画笔工具：

选中的瓦片会显示白色边框高亮。颜色瓦片的名称和标签都可以自定义修改（见下一节）。

如何添加图片素材通过对话向 AI 助手发送指令，AI 会自动完成以下操作：

示例对话：

"帮我把这几张图片放到 Tiles 文件夹里作为瓦片素材"

"用 AI 生成几张等距风格的地面瓦片，放到 assets/Ground/ 目录"

最终生成的目录结构如下：

其中 manifest.json 内容为图片文件名列表：

在编辑器中加载图片素材准备好后，在编辑器侧边面板的"图片资源"区域：

命名：默认的"草地""水面"等名称可能不符合具体项目需求。自定义命名让导出的数据更有语义——比如将"草地"改名为"森林地面"，在代码中读取地图数据时一目了然。

标签（Tag）：标签是一个可选的字符串，用于为瓦片附加游戏逻辑标记，而不改变瓦片的视觉表现。标签的核心用途是配合"行走规则"系统实现碰撞检测——比如标记某些瓦片为 wall（不可行走）或 slow（减速区域）。标签也可以用于其他自定义用途，如标记刷怪点 spawn、宝箱位置 chest 等。使用方式在侧边面板选中一个瓦片后，下方的"瓦片属性"区域会显示：

多图层系统是专业地图编辑器的标准功能。将地图内容分布在不同图层上，可以独立编辑地面、建筑物、装饰物等，互不干扰。图层还支持可见性控制、锁定、透明度调节，方便在复杂地图中专注于特定内容。

选中某个图层后，在图层详情区域会出现 透明度滑块（0% ~ 100%，步进 5%）。

选中图层后可以设置 图层级标签（如 collision、decoration）。图层标签与瓦片标签配合使用，可以实现更灵活的行走规则（详见"图层标签与行走规则"章节）。

当地图层数较多时（如"地面""道路""建筑底部""建筑顶部""装饰""碰撞层"），逐个管理图层变得繁琐。图层组提供了一种 文件夹式的组织方式——将相关图层归入同一组，可以一键折叠收起、批量切换可见性和锁定状态。

编辑建筑时，折叠"地形组"和"逻辑组"，只展开"建筑组"，工作区域更整洁。需要测试碰撞时，展开"逻辑组"查看标记。

地图编辑器不仅用于绘制视觉地图，还需要定义游戏逻辑。标签+行走规则系统让设计者可以 直接在编辑器内标注哪些区域可以行走、哪些区域是障碍，并通过"游玩模式"立即测试效果。

地图中经常有重复的结构（如对称的建筑、重复的路段）。选区+复制粘贴可以避免重复劳动，快速复制已有的地图片段到其他位置。

编辑操作不可避免会出错，撤销/重做是编辑器的安全网。支持最多 100 步撤销历史，且拖拽绘制、矩形填充等批量操作会被合并为一次撤销步骤，确保一键撤销就能回退整个操作。

允许在开发过程中灵活调整地图大小——从小尺寸原型逐步扩展到最终尺寸，或者缩小测试用的大地图。调整时已有的瓦片数据会尽量保留。

编辑器通过导出 JSON 来持久化地图数据。导出的 JSON 可以保存到本地，也可以通过导入功能重新加载到编辑器中继续编辑。

点击工具栏的 "导出" 按钮，编辑器会将当前地图数据序列化为 JSON 并输出到浏览器控制台（详见下一节"导出与导入 JSON"）。编辑器还支持退出时自动保存到临时存档，重新进入编辑器时会自动恢复上次的编辑状态（WASM 环境刷新页面后丢失）。

JSON 是通用的数据交换格式。导出 JSON 可以让地图数据被任何语言和工具读取，方便与其他项目或团队成员共享。导入功能则允许从外部 JSON 文件恢复地图。

由于 WASM 平台限制，编辑器内的剪贴板无法直接与系统剪贴板交互，需要通过浏览器控制台中转。

导出的 JSON 包含以下核心结构

瓦片 ID 约定：0 = 空，1~5 = 颜色瓦片，100+ = 图片瓦片。

坐标约定：x（列）和 y（行）均从 1 开始。

稀疏存储：tiles 数组只包含非空瓦片，解析时先创建全零网格再填入。

地图设计完成后，设计者需要亲身体验空间感——格子之间的距离是否合适？障碍物的摆放是否合理？通道是否太窄？游玩模式让你 不离开编辑器就能立即测试地图，用 WASD 控制一个角色在地图上移动，自动遵守行走规则（碰撞检测）。

缩放比例不为 100% 时，画布右下角会显示当前缩放百分比（如 150%）。

鼠标悬停在画布上时，当前工具会在悬停瓦片上显示对应颜色的半透明高亮：

格式要求：PNG，带透明通道（RGBA）

尺寸规范（等距菱形瓦片）：

关键渲染规则（代码逻辑 IsoCanvas.lua:190-210）：

引擎用同一张 PNG 适配两种视图，缩放逻辑：

等距模式:  drawW = tileWH * 2 (菱形全宽)，等比缩放高度

正视模式:  drawW = tdTileW    (格子宽度)，等比缩放高度

所以一张图不需要做两个版本，引擎自动按宽度缩放。

地面瓦片：

物体/墙壁瓦片：

外部工具生成等距素材常用 30° 标准等距（宽高比约 1.73:1），而本编辑器用 2:1 像素等距，角度差导致素材和网格错位：

2:1 pixel art isometric tile, 26.5 degree angle,

diamond shape with width:height ratio exactly 2:1,

transparent background, PNG format, 128px wide

使用是请先告知嗒啦啦启用，如果没有看到如图按钮，可能是由于不同项目的分辨率问题，请自行调整

其余使用相关疑问可以直接向嗒啦啦提问（比如json解析，资源添加，调整网格大小和角度，使得与用户项目实际美术资源匹配等）

#TapTap制造 #2D场景地图编辑器 #锻造与征途2 #锻造与征途