地图编辑器地面交互与视觉优化

horizontal linehorizontal line

一、问题链

用户截图反馈了三个递进的问题:
问题 1:点击地面类型(如食堂地砖),弹窗不关闭,挡住画布无法操作
         ↓ 修复 v0.10.94
问题 2:地面贴图太大,一块地砖比小人还宽,比例失调
         ↓ 修复 v0.10.96(改配置值)
问题 3:改了配置值后刷新仍然太大——旧存档的 tileSize=256 优先级高于新 config
         ↓ 修复 v0.10.97(反转渲染优先级)
horizontal linehorizontal line

二、关键代码

1. 地面选择后自动关闭弹窗(v0.10.94)

文件scripts/页面/地图编辑模式.luaSelectPaletteItem 函数
修改前:只有"木地板"会关闭弹窗,其余 7 种地面类型弹窗一直挡着画布。
lua
-- ❌ 旧代码:仅木地板特判关闭弹窗 if item.floorStyle then editorState_.selectedFloorStyle = item.floorStyle if item.floorStyle == "木地板" then editorState_.sidebarCategory = nil -- 只有木地板关闭 end end
修改后:所有地面类型统一关闭弹窗 + 给出操作引导。
lua
-- ✅ 新代码:所有地面类型统一关闭弹窗 if item.floorStyle then editorState_.selectedFloorStyle = item.floorStyle editorState_.sidebarCategory = nil -- ★ 统一关闭 editorState_.status = "已选择" .. item.text .. "。点击房间铺设地面,或在空白处拖拽框选地面区域。" RequestRebuildUI(context) return -- ★ 提前退出,不走下面的通用逻辑 end
经验:弹窗的 sidebarCategory 是唯一的开关变量,设为 nil 即关闭。新增地面类型时不需要逐个加特判。
horizontal linehorizontal line

2. tileSize 配置值缩放(v0.10.96)

三处同源配置必须同步改,否则编辑器和运行时显示不一致。
(a)编辑器目录scripts/页面/地图编辑/编辑器目录.lua
lua
MapEditorCatalog.FLOOR_STYLE_CONFIGS = { ["木地板"] = { texture = "image/地面/木地板_无缝.png", tileSize = 40 }, -- 原 128 ["草地"] = { texture = "image/地面/campus_background.png", tileSize = 64 }, -- 原 256 ["水泥地"] = { texture = "image/地面/campus_canteen_floor.png", tileSize = 40 }, -- 原 256 ["教室地砖"] = { texture = "image/地面/campus_classroom_floor.png", tileSize = 40 }, -- 原 256 ["走廊地砖"] = { texture = "image/地面/campus_classroom_floor.png", tileSize = 40 }, ["卫生间瓷砖"] = { texture = "image/地面/campus_canteen_floor.png", tileSize = 40 }, ["食堂地砖"] = { texture = "image/地面/campus_canteen_floor.png", tileSize = 40 }, ["医务室地砖"] = { texture = "image/地面/campus_canteen_floor.png", tileSize = 40 }, }
(b)运行时地图scripts/页面/校园地图.lua
lua
local FLOOR_STYLE_TEXTURES = { ["木地板"] = { texture = "image/地面/木地板_无缝.png", tileSize = 40 }, ["草地"] = { texture = SCHOOL_BACKGROUND_IMAGE, tileSize = 64 }, ["水泥地"] = { texture = "image/地面/campus_canteen_floor.png", tileSize = 40 }, -- ... 其余同编辑器目录,全部 40 }
(c)功能空间注册表scripts/数据/地图/功能空间类型注册表.lua
lua
-- 每个房间类型的 floorTileSize 默认值 { type = "教室", floorTileSize = 40, ... }, -- 原 256 { type = "厕所", floorTileSize = 40, ... }, { type = "食堂", floorTileSize = 40, ... }, { type = "操场", floorTileSize = 64, ... }, -- ★ 草地用 64,不是 40
(d)编辑器 fallbackscripts/页面/地图编辑模式.lua
lua
local floorTileSize = floorStyleCfg.tileSize or roomTypeConfig.floorTileSize or 40 -- ★ 原 256
tileSize 计算依据
源图512×512 内可见元素tileSize=40 时每元素像素对比小人 ~15px
深色木地板12 横板40/12 ≈ 3.3px小人的 1/5
浅色木地板8 竖板40/8 = 5px小人的 1/3
灰色地砖8×8 方格40/8 = 5px小人的 1/3
草地花丛4×4 簇64/4 = 16px≈ 小人身高
horizontal linehorizontal line

3. 渲染优先级反转 — config 覆盖旧存档(v0.10.97)

根因:v0.10.96 只改了配置值,但渲染代码用 saved_value or config_value 取 tileSize。旧存档保存了 tileSize=256,优先级高于新 config 值 40,所以改了配置也不生效。
修复 4 处,全部改为 config only
(a)编辑器房间渲染scripts/页面/地图编辑模式.lua
lua
-- ❌ 旧:room.floorTileSize 优先(旧存档=256,覆盖 config=40) local floorTileSize = room.floorTileSize or roomTypeConfig.floorTileSize or 40 -- ✅ 新:config 优先 local floorStyleCfg = GetFloorStyleConfig(room.floorStyle) local floorTileSize = floorStyleCfg.tileSize or roomTypeConfig.floorTileSize or 40
(b)编辑器地面区域scripts/页面/地图编辑/地面区域编辑.lua
lua
-- ❌ 旧 tileSize = area.tileSize or styleConfig.tileSize, -- ✅ 新:直接用 config,忽略存档 tileSize = styleConfig.tileSize,
(c)运行时房间scripts/页面/校园地图.lua
lua
-- ❌ 旧 tileSize = room.floorTileSize or floorStyle.tileSize, -- ✅ 新 tileSize = floorStyle.tileSize,
(d)运行时地面区域scripts/页面/校园地图.lua
lua
-- ❌ 旧 tileSize = area.tileSize or floorTexture.tileSize, -- ✅ 新 tileSize = floorTexture.tileSize,
horizontal linehorizontal line

三、经验提炼

编号教训适用场景
E1弹窗选择项应统一关闭弹窗,不要对个别项做特判。新类型加入时不需要额外维护所有"选择后进入操作模式"的弹窗交互
E2tileSize 计算先看源图像素和内容密度,再用"目标单元素像素 = tileSize / 源图可见元素数"反推任何 TiledImage/纹理平铺场景
E3视觉参数(tileSize 等)应以 config 为唯一真相源,渲染代码不应读存档缓存值。存档里的值只用于数据迁移,不用于渲染任何"config 改了但旧数据不生效"的问题
E4多处同源配置必须同步修改(编辑器目录 + 运行时地图 + 注册表 + fallback),漏改一处就会出现编辑器和运行时不一致所有跨模块共享的配置常量

四、改动文件清单

文件v0.10.94v0.10.96v0.10.97
页面/地图编辑模式.luaSelectPaletteItem 关闭弹窗fallback 256→40房间 tileSize config 优先
页面/地图编辑/编辑器目录.luaFLOOR_STYLE_CONFIGS 全部改值
页面/地图编辑/地面区域编辑.luaCreateAreaWidget config 优先
页面/校园地图.luaFLOOR_STYLE_TEXTURES 全部改值房间+地面区域 config 优先
数据/地图/功能空间类型注册表.luafloorTileSize 全部改值
4