2D自然光照效果开发指南：划破黑暗，洞见光明

游戏开发画面，后续还会优化

```lua

function DrawLighting(vg)

    local lights = CollectAllLights()

-- Step 2: 全屏黑暗层

nvgBeginPath(vg)

nvgRect(vg, camX, camY, screenW, screenH)  -- 覆盖整个可见区域

nvgFillColor(vg, nvgRGBA(0, 0, 0, 255))    -- 255 = 完全不可见

nvgFill(vg)

-- Step 3: DESTINATION_OUT —— 逐光源擦除黑暗

nvgGlobalCompositeOperation(vg, NVG_DESTINATION_OUT)

for _, l in ipairs(lights) do

    nvgBeginPath(vg)

    nvgCircle(vg, l.x, l.y, l.r)

    local paint = nvgRadialGradient(vg, l.x, l.y,

        l.r * 0.06,   -- 亮核半径：极小，只有 6% 是完全透亮的

        l.r * 0.92,   -- 衰减终点：92% 处开始全黑

        nvgRGBA(255, 255, 255, 255),  -- 中心：完全擦除

        nvgRGBA(255, 255, 255, 0))    -- 边缘：不擦除

    nvgFillPaint(vg, paint)

    nvgFill(vg)

end

nvgGlobalCompositeOperation(vg, NVG_SOURCE_OVER)  -- 恢复默认

-- Step 4: DESTINATION_OVER —— 在光照区背后补回场景

nvgGlobalCompositeOperation(vg, NVG_DESTINATION_OVER)

DrawSceneReverse(vg)  -- 注意：反向绘制！

nvgGlobalCompositeOperation(vg, NVG_SOURCE_OVER)

-- Step 5: 暖色光晕叠加（增加氛围感）

for _, l in ipairs(lights) do

    -- 大范围暖色弥漫

    nvgBeginPath(vg)

    nvgCircle(vg, l.x, l.y, l.r * 0.55)

    local outer = nvgRadialGradient(vg, l.x, l.y, 0, l.r * 0.55,

        nvgRGBA(l.cr, l.cg, l.cb, 50),

        nvgRGBA(l.cr, l.cg, l.cb, 0))

    nvgFillPaint(vg, outer)

    nvgFill(vg)

    -- 核心亮点

    nvgBeginPath(vg)

    nvgCircle(vg, l.x, l.y, l.r * 0.2)

    local core = nvgRadialGradient(vg, l.x, l.y, 0, l.r * 0.2,

        nvgRGBA(l.cr, l.cg, l.cb, 80),

        nvgRGBA(l.cr, l.cg, l.cb, 0))

    nvgFillPaint(vg, core)

    nvgFill(vg)

end

end

```

```lua

function HandleNanoVGRender()

    nvgBeginFrame(vg, width, height, dpr)

-- Step 1: 正常画一遍场景

DrawScene(vg)

-- Step 2-5: 光照处理（黑暗 + 擦除 + 恢复 + 光晕）

DrawLighting(vg)

-- HUD 在最上层，不受光照影响

DrawHUD(vg)

nvgEndFrame(vg)

end

```

```lua

function CollectAllLights()

    local all = {}

-- 火把：主光源，带闪烁动画

for _, t in ipairs(torches) do

    if t.is_on then

        -- 用 sin 函数让半径微微跳动，模拟火焰闪烁

        local flicker = math.sin(totalTime * 3.0 + t.flickerPhase) * 8

        table.insert(all, {

            x = t.x, y = t.y - 8,

            r = t.lightRadius + flicker,       -- 大光圈 + 闪烁

            cr = 255, cg = 170, cb = 70,       -- 暖色

        })

    else

        -- 未点亮的火把也发微弱光，让玩家能隐约发现它

        table.insert(all, {

            x = t.x, y = t.y - 8,

            r = 18,                             -- 很小的光圈

            cr = 255, cg = 170, cb = 70,

        })

    end

end

-- 玩家：微弱冷色光，亮度随 LP（生命值）变化

local lpRatio = player.lp / LP_MAX

table.insert(all, {

    x = player.x, y = player.y,

    r = 15 + 20 * lpRatio,                     -- LP 越高光越大

    cr = 200, cg = 210, cb = 255,               -- 冷色调，和火把形成对比

})

-- 钥匙：金色微光，吸引玩家注意

for _, k in ipairs(keys) do

    if not k.collected then

        table.insert(all, {

            x = k.x, y = k.y,

            r = 25,

            cr = 255, cg = 220, cb = 50,       -- 金色

        })

    end

end

-- 敌人：紫色幽光，营造危险感

for _, e in ipairs(enemies) do

    if e.alive then

        table.insert(all, {

            x = e.x + e.w/2, y = e.y + e.h/2,

            r = 22,

            cr = 160, cg = 80, cb = 220,       -- 紫色

        })

    end

end

-- 萤火虫：随机闪烁的小光点

for _, f in ipairs(fireflies) do

    local glow = 0.5 + 0.5 * math.sin(f.brightness)

    table.insert(all, {

        x = f.x, y = f.y,

        r = 12 * glow + 5,

        cr = f.r, cg = f.g, cb = f.b,

    })

end

-- 地面边缘微光：让地形轮廓隐约可见

for _, seg in ipairs(edgeSegments) do

    if seg.dir == "top" then

        local step = tileSize * 3

        local count = math.max(1, math.floor(seg.len / step))

        for i = 0, count do

            table.insert(all, {

                x = seg.x + (seg.len * i / count),

                y = seg.y,

                r = 14,

                cr = 60, cg = 80, cb = 100,    -- 冷蓝，非常微弱

            })

        end

    end

end

return all

end

```

• 想要更大的中心亮区：把 innerRadius 比例从 0.06 调大到 0.15~0.20
• 想要更柔和的明暗过渡：把 outerRadius 比例从 0.92 调小到 0.75~0.80
• 想要夜视效果（暗区微微透光）：把黑暗层 alpha 从 255 降到 230~240
• 想要更浓烈的色彩感：把光晕层的 alpha 值调高（50→80, 80→120）
• 想要更明显的火焰跳动：把闪烁振幅从 ±8px 调大到 ±15px
• 想要手电筒/锥形光：把 nvgCircle 换成扇形 path

• 控制光源数量：实测 10~15 个光源以内完全流畅，超过 20 个需注意性能
• 视口裁剪：只绘制摄像机可见范围内的内容，屏幕外的直接跳过
• 远处光源简化：离屏幕边缘很远的光源可以跳过光晕层
• 合成模式批量化：先画完所有 DEST_OUT 的，再统一切回来，减少状态切换

• 昼夜循环：让 DARKNESS 随时间在 255 到 0 之间变化
• 手电筒效果：把擦除的圆改成扇形路径
• 光照遮挡/阴影：从光源射线检测碰撞体，被挡的方向不擦除
• 动态光源：爆炸、技能释放时临时添加光源到列表
• 彩色场景染色：不同区域用不同颜色的光，营造不同氛围

总结

觅光 Lightseeker

TapTap制造

冒险

TapTap PC版