一个简易2d瓦片集地形编辑器的分享

修改于03/19169 浏览开发心得

看了霸鸽雪大佬的帖子产生的一些灵感

成品展示

第1步：

首先需要这四个文件：

2d简易地形编辑器链接: (pan)去.baidu掉.com/s中/文1mwBmsUg-oAJCu6cbzelD2g?pwd=875m 密码: 875m

4个文件中：

前端ui代码:tileset-bitmask-editor-nanovg.txt

前端文档：NANOVG.md

核心逻辑代码：multi_layer_terrain.txt

核心逻辑文档:README.md

第2步：

把这4个文件上传到你的tap制造项目文档中，然后拖拽至和塔拉拉的对话框。

告诉塔拉拉：我要制作一个2d的地形编辑器

前端ui代码:tileset-bitmask-editor-nanovg.txt

前端文档：NANOVG.md

核心逻辑代码：multi_layer_terrain.txt

核心逻辑文档:README.md

2个代码和2个功能文档你都阅读一下，然后告诉我你是否理解？

下面是塔拉拉的回答：

、

我的回答：

1.B（如果你的游戏是俯视角就选A）。

2.右侧信息面板可以不要。其他严格按照文档做。

3.我会把素材上传到素材库，然后告诉你哪个层级用哪张图，你帮我加载进编辑器

4.我会提供图集

另外bitmask 0~15 对应的 tile 是列优先排列

接下来等塔拉拉制作完毕后：

首先把网盘里的3张png上传到素材库：

和塔拉拉确认能否读到这些素材

最后告诉塔拉拉：我要按层级实装地形素材：层1使用Lords_GrassDark.层2使用city_grasstrim。层3使用city_roundtiles

等待塔拉拉制作完毕就可以进入游戏测试编辑器了。

注意：

做完时候我的塔拉拉遇到了2个问题：

1. cols/rows 反了（terrain_renderer.lua）

修复前：cols=4, rows=8（错误 — 把 8×4 理解成 4 列 8 行）
修复后：cols=8, rows=4（正确 — 8 列 4 行）
LoadLayerTileset 现在通过 nvgImageSize 获取图片实际尺寸
宽高比 ≥ 1.9 自动判定为 8x4，否则 4x4
tileW/tileH 也根据图片尺寸自动算（imgW/cols, imgH/rows）
检测结果同步回 multi_terrain 数据层，确保 resolveFullTile 对 8×4 正确使用 16-31 变体
（解决方案就是上面说的：0~15 对应的 tile 是列优先排列）
2. 加了自动检测（terrain_renderer.lua）
LoadLayerTileset 现在通过 nvgImageSize 获取图片实际尺寸
宽高比 ≥ 1.9 自动判定为 8x4，否则 4x4
tileW/tileH 也根据图片尺寸自动算（imgW/cols, imgH/rows）
检测结果同步回 multi_terrain 数据层，确保 resolveFullTile 对 8×4 正确使用 16-31 变体
（解决方案是：告诉塔拉拉：8x4的的解析方式和4x4的不一样，你没有做区分，仔细阅读multi_layer_terrain.txt 这个文件。代码里已经做了区分：function MultiLayerTerrain:detectAndSetTilesetType(layer, imageWidth, imageHeight)
if imageWidth == imageHeight then
self.layers[layer].tilesetType = '4x4'
else
self.layers[layer].tilesetType = '8x4'
end
end
）