【咪の开发日记】01地图编辑器

感谢大家支持我做的这款《哈激咪》小游戏，在这里和大家分享一下我vibecoding的一些心得——今天分享的是《哈激咪》的地图制作。

由于我没有接触过正规的游戏开发（虽然大学学的是计算机，但研究生转专业了），对于游戏地图的制作一直是我苦恼的问题。单纯让AI直接生成，没有办法做到标准化，比如一些人物和物体的比例、扫地机器人的移动空间。特别重要的一点就是没有标准就无法导入美工的素材（AI画出来的我始终不满意...）。

起初，为了解决这个问题。我使用excel表格，固定单元格大小是1X1，在表格里涂色画出来的初代地图（见P2）。（也是被自己蠢到了...）

画完，我突然灵机一动，为什么我不直接用AI写一个编辑器呢？？？？？

具体和AI交流如下（我用的是本地部署的TAPTAP制造+claudecode+deepseek V4 Pro）：

我：【我现在的地图设计思路是将整个地图拆分成无数个格子（你可以看看我的地图代码），你按照我现在的思路为我做一个可视化的地图设计工具，我可以直接在上面按照我的想法像画画一样通过涂格子的方法来制作新地图，并定义相应的区域。并支持把我画好的地图，上传到游戏项目里。你先把要做的事列出一个清单，然后我同意后，你自动执行即可。】

AI：【可视化地图设计工具 — 任务清单

1. 创建独立 HTML 编辑器页面

单个 map-editor.html 文件，浏览器打开即用

72列 × 40行 网格画布，支持缩放和拖拽平移

淡紫色 UI 风格，与游戏保持一致

2. 涂色画笔系统

左侧工具栏列出所有可用元素类型，分类显示：

实心平台：墙、地板、书架、沙发、空调、猫架柱

可穿透平台：猫架层、普通搁板、小搁板、晾衣架、隐形平台

危险物：仙人掌、鱼缸、机器人

装饰物：地毯、毛线球、挂画、猫咪画像、猫爬架柱

每种类型用专属颜色标识

点击/拖拽即可涂格子

3. 元素属性编辑

选中格子后可编辑属性：名称、颜色、刷点权重(spawnWeight)、是否生成红点(spawnDot)、素材键(imageKey)

危险物特有属性：伤害值(cost)、巡逻范围(机器人)

4. 矩形合并导出

导出时自动将相邻同类型格子合并为矩形区域

生成完整 BuildLivingRoom() 函数的 Lua 代码

一键复制或下载 .lua 文件

5. 辅助功能

橡皮擦 / 清除选中区域

撤销 / 重做

清空整个画布

网格线显示/隐藏切换

行列坐标轴标注（A-BT, 1-40）

已画区域统计（平台数、危险物数、装饰数）

6. 集成到项目

导出的 Lua 代码直接替换 scripts/map.lua 中的 BuildLivingRoom() 函数体

支持导入现有地图（解析当前的 BuildLivingRoom 代码回填到画布）

总共 6 个大项。确认后我立刻开始写。】

我：【这个代码不要写到我的项目里，单独在F:\code目录下开一个文件夹，写在里面。然后自动执行即可】

于是，《哈激咪》专用地图编辑器诞生了！！（见P1）

在编机器上画好后，可以一键生成相应的Lua代码，粘贴到项目里直接就能用。

大家可以参考我的思路，很方便，或者有什么更好的思路可以在评论区里教教我，一起进步。

#TapTap制造 #哈激咪

#我的首个TapTap制造游戏