Files
NS_unknown_game/tools/map_editor/README.md
T
2026-06-10 00:54:05 +08:00

2.8 KiB

地图编辑器

这是一个静态网页地图编辑器,用来编辑游戏使用的 .map 文本文件。

本地运行

在仓库根目录执行:

python -m http.server 8787

然后打开:

http://127.0.0.1:8787/tools/map_editor/

从仓库根目录启动静态服务时,编辑器可以自动读取 game/assets/map/stage_01.map。也可以通过“打开 .map”选择任意 .map 文件。

当前能力

  • 打开 .map 文本文件。
  • 可视化世界范围、摄像机范围、玩家出生点、碰撞块、场景矩形、铺砖区、战斗区和敌人出生点。
  • 从画布或对象列表选择对象。
  • 在画布上拖动对象,支持网格吸附。
  • 通过“编辑目标”过滤画布选择对象,默认优先编辑碰撞块,避免点到重叠的铺砖区。
  • 选中矩形对象后,拖动右下角蓝色手柄可以调整宽高。
  • 通过“导入图形”选择图片,自动生成一个 rect_sprite 图形对象和一个同尺寸 collision
  • 导入的图形会在浏览器内临时预览,拖动或缩放图形时,同步移动或缩放绑定的碰撞块。
  • 编辑选中对象的数值和文本属性。
  • 新增/删除图块集、图层、碰撞块、铺砖区、战斗区和出生点。
  • 下载兼容 StageMapLoader.map 文本。

调整碰撞块

  1. 在左侧“编辑目标”里选择“碰撞块”。
  2. 在画布上点击红色碰撞框,或从对象列表选择对应碰撞块。
  3. 拖动碰撞块本体可以移动位置。
  4. 拖动右下角蓝色手柄可以调整宽高。
  5. 也可以在右侧属性面板直接修改 XYWH

导入和调整图形

  1. 点击左侧“导入图形”,选择一个图片素材。
  2. 编辑器会把它添加到 PropsBack 图层,并在同一位置创建同尺寸碰撞块。
  3. 新图形会自动选中,左侧“编辑目标”会切到“场景矩形”。
  4. 拖动图形本体可以移动图形和绑定碰撞块。
  5. 拖动右下角蓝色手柄可以调整图形和绑定碰撞块尺寸。
  6. 也可以在右侧属性面板修改 XYWH、颜色和贴图路径。

静态网页不能自动把图片复制进项目目录。导入后 .map 默认写入:

assets/stage/stage_01/props/<图片文件名>

实际运行游戏前,需要把图片素材放到这个路径下。

当前限制

  • 浏览器安全限制不允许静态网页直接覆盖本地源文件。当前需要先下载 .map,再手动替换项目里的地图文件;部署到服务器后可以增加服务端保存接口。
  • 已导入图形的预览只在当前浏览器会话内有效;重新打开 .map 后,如果浏览器没有重新选择图片,图形会用颜色块显示。
  • 暂未实现图块集图片预览,铺砖区当前使用 fallback 颜色显示。
  • 暂未实现撤销/重做和多选。