99 lines
4.7 KiB
Markdown
99 lines
4.7 KiB
Markdown
# 地图编辑器
|
|
|
|
这是一个静态网页地图编辑器，用来编辑游戏使用的 `.map` 文本文件。
|
|
|
|
完整工具说明见：
|
|
|
|
```text
|
|
tools/map_editor/DOCUMENTATION.md
|
|
```
|
|
|
|
## 本地运行
|
|
|
|
在仓库根目录执行：
|
|
|
|
```powershell
|
|
python -m http.server 8787
|
|
```
|
|
|
|
然后打开：
|
|
|
|
```text
|
|
http://127.0.0.1:8787/tools/map_editor/
|
|
```
|
|
|
|
从仓库根目录启动静态服务时，编辑器可以自动读取 `game/assets/map/stage_01.map`。也可以通过“打开 .map”选择任意 `.map` 文件。
|
|
|
|
## 当前能力
|
|
|
|
- 打开 `.map` 文本文件。
|
|
- 可视化世界范围、摄像机范围、玩家出生点、碰撞块、场景矩形、铺砖区、战斗区和敌人出生点。
|
|
- 从画布或对象列表选择对象。
|
|
- 在画布上拖动对象，支持网格吸附。
|
|
- 通过“编辑目标”过滤画布选择对象，默认“智能选择”把碰撞块当作上层覆盖；同位置对象第一次点选碰撞块，再点一次切到下层铺砖区或图形。
|
|
- 选中矩形对象后，拖动右下角蓝色手柄可以调整宽高。
|
|
- 通过“导入图形”选择图片，自动生成一个 `rect_sprite` 图形对象和一个同尺寸 `collision`。
|
|
- 从仓库根目录启动静态服务时，`.map` 内 `assets/...` 贴图路径会自动映射到 `game/assets/...` 并显示预览。
|
|
- 导入的图形会在浏览器内预览，拖动或缩放图形时，同步移动或缩放绑定的碰撞块。
|
|
- 已有 `rect_sprite_src` 图形可以在属性面板调整源图裁切区域。
|
|
- 编辑选中对象的数值和文本属性。
|
|
- 新增/删除图块集、图层、碰撞块、铺砖区、战斗区和出生点。
|
|
- 支持撤回最近编辑操作，也可以使用 `Ctrl+Z`。
|
|
- 选中图层或图层内对象后，可以把对应图层上移或下移。
|
|
- 保存并下载兼容 `StageMapLoader` 的 `.map` 文本。
|
|
|
|
## 保存和撤回
|
|
|
|
- “保存并下载”会把右侧导出文本下载成 `<地图ID>.map`。
|
|
- 浏览器安全限制下，静态网页不能直接覆盖本地项目文件；下载后仍需要替换项目里的地图文件。
|
|
- “撤回”会恢复最近一次地图编辑操作，包括新增、删除、拖动、缩放、属性修改、导入图形和图层移动。
|
|
- 打开或重新加载 `.map` 会清空撤回历史。
|
|
|
|
## 调整碰撞块
|
|
|
|
1. 在左侧“编辑目标”里选择“智能选择”或“碰撞块”。
|
|
2. 在画布上点击红色碰撞框，或从对象列表选择对应碰撞块；智能选择下碰撞块会优先命中。
|
|
3. 拖动碰撞块本体可以移动位置。
|
|
4. 拖动右下角蓝色手柄可以调整宽高。
|
|
5. 也可以在右侧属性面板直接修改 `X`、`Y`、`W`、`H`。
|
|
|
|
## 调整铺砖区
|
|
|
|
1. 在左侧“编辑目标”里选择“智能选择”或“铺砖区”。
|
|
2. 如果铺砖区和碰撞块重叠，智能选择下先点到碰撞块，再在同一区域点一次会切到铺砖区；也可以直接切到“铺砖区”。
|
|
3. 拖动铺砖区本体可以移动位置。
|
|
4. 拖动右下角蓝色手柄可以调整列数和行数。
|
|
5. 如果要编辑同位置碰撞体，再把“编辑目标”切到“碰撞块”。
|
|
|
|
## 导入和调整图形
|
|
|
|
1. 点击左侧“导入图形”，选择一个图片素材。
|
|
2. 编辑器会把它添加到 `PropsBack` 图层，并在同一位置创建同尺寸碰撞块。
|
|
3. 新图形会自动选中，左侧“编辑目标”会切到“场景矩形”。
|
|
4. 拖动图形本体可以移动图形和绑定碰撞块。
|
|
5. 拖动右下角蓝色手柄可以调整图形和绑定碰撞块尺寸。
|
|
6. 也可以在右侧属性面板修改 `X`、`Y`、`W`、`H`、颜色和贴图路径。
|
|
7. 如果图形来自 `rect_sprite_src`，属性面板还会显示 `源 X`、`源 Y`、`源 W`、`源 H`，用于调整图集裁切区域。
|
|
|
|
静态网页不能自动把图片复制进项目目录。导入后 `.map` 默认写入：
|
|
|
|
```text
|
|
assets/stage/stage_01/props/<图片文件名>
|
|
```
|
|
|
|
实际运行游戏前，需要把图片素材放到这个路径下。
|
|
|
|
## 调整图层顺序
|
|
|
|
1. 在对象列表中选择一个图层，或选择该图层下的图形/铺砖区。
|
|
2. 点击右侧“图层上移”或“图层下移”。
|
|
3. 编辑器会按当前图层顺序预览和导出 `.map`。
|
|
|
|
## 当前限制
|
|
|
|
- 浏览器安全限制不允许静态网页直接覆盖本地源文件。当前需要先下载 `.map`，再手动替换项目里的地图文件；部署到服务器后可以增加服务端保存接口。
|
|
- 如果 `.map` 里的贴图路径指向 `assets/...` 且文件存在于 `game/assets/...`，重新打开后会自动预览图片。
|
|
- 如果导入图片后没有把真实文件放入 `game/assets/...` 对应路径，重新打开后会回退为颜色块。
|
|
- 暂未实现图块集图片预览，铺砖区当前使用 fallback 颜色显示。
|
|
- 暂未实现重做和多选。
|