【游戏地图黑边问题解决方案】

之前做地图的时候遇到了这个问题，今天看到论坛权哥好像是这种情况，翻了一下之前我花了几千分才解决的记录。

顺便挂一下我游戏和混点积分吧，还有5天刷新积分，泪目了

06-08 23:25

Bot Avatar

让我好好想一想...

NanoVG 直接绘制方案总结

核心思路

绕过 3D 渲染管线，用 NanoVG 直接把图片像素画到屏幕上。

旧方案（失败）：

  图片 → 3D材质 → 正交相机 → HDR/Fog/Tonemapping → 颜色偏色

  图片 → UI组件 → Safe Area裁剪 → 黑边

新方案（成功）：

  图片 → nvgCreateImage → nvgImagePattern → 直接光栅化到帧缓冲 → 颜色完美

关键技术点

1. 图片加载（只加载一次）

mapImage_ = nvgCreateImage(vg_, "image/地图/白天地图.png", 0)

2. Cover 模式填满屏幕

lua

复制

local function calcCoverScale()

    local sw, sh = getScreenSize()

    return math.max(sw / IMG_W, sh / IMG_H)

end

3. NanoVGRender 事件中绘制

lua

复制

nvgBeginFrame(vg_, sw, sh, dpr)

-- 背景色填满

nvgBeginPath(vg_)

nvgRect(vg_, 0, 0, sw, sh)

nvgFillColor(vg_, nvgRGB(8, 42, 62))

nvgFill(vg_)

-- 地图图片

local drawScale = calcCoverScale() * zoom_

local drawW = IMG_W * drawScale

local drawH = IMG_H * drawScale

local drawX = (sw - drawW) / 2 + panX_

local drawY = (sh - drawH) / 2 + panY_

local paint = nvgImagePattern(vg_, drawX, drawY, drawW, drawH, 0, mapImage_, 1.0)

nvgBeginPath(vg_)

nvgRect(vg_, drawX, drawY, drawW, drawH)

nvgFillPaint(vg_, paint)

nvgFill(vg_)

nvgEndFrame(vg_)

4. 缩放限制（永不露边界）

lua

复制

ZOOM_MIN = 1.0  -- 最小 = cover级别，地图始终填满屏幕

ZOOM_MAX = 4.0  -- 最大放大4倍

5. 平移钳制（拖动不超出）

lua

复制

local maxPanX = math.max(0, (drawW - sw) / 2)

local maxPanY = math.max(0, (drawH - sh) / 2)

panX_ = math.max(-maxPanX, math.min(maxPanX, panX_))

panY_ = math.max(-maxPanY, math.min(maxPanY, panY_))

为什么这个方案能解决所有问题

问题 原因 NanoVG 如何解决

颜色偏色 3D管线的HDR/tonemapping/fog NanoVG不经过3D管线

安全区黑边 UI系统裁剪到safe area NanoVG直接渲染到物理屏幕全区域

边界可见 缩放超出cover级别 zoom最小值=1.0(cover)

适用场景

任何需要全屏显示2D图片且颜色精确的场景：地图界面、启动画面、相册查看器、漫画阅读器等。