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

修改于07/1587 浏览综合

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

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

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

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

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

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

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

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

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

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

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

2. 涂色画笔系统

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

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

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

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

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

每种类型用专属颜色标识