Love2D中玩家移动时地图边缘闪烁的解决方法咨询

问题描述 #

使用Love2D结合STI库渲染Tiled制作的像素风格地图时，玩家移动过程中会出现抖动/闪烁，在包含栅栏、窗户等大量线条纹理的地图上尤为明显。移动核心代码如下：

local moveX, moveY = 0, 0
if love.keyboard.isDown("right") then moveX = 1 end
if love.keyboard.isDown("left")  then moveX = -1 end
if love.keyboard.isDown("down")  then moveY = 1 end
if love.keyboard.isDown("up")    then moveY = -1 end

local norm = math.sqrt(moveX^2 + moveY^2)

if norm > 0 then
    player.x = player.x + (moveX / norm) * player.speed * dt
    player.y = player.y + (moveY / norm) * player.speed * dt
end

当强制将dt设为固定值0.01且玩家速度为100时，移动正常；但使用真实dt或调整速度后，闪烁问题复现。完整代码如下：

local sti = require("sti")

local map
local player = {}
local camera = { x = 0, y = 0 }

-- 固定虚拟分辨率
local virtualWidth, virtualHeight = 400, 320
local screenWidth, screenHeight = 800, 640

local canvas

function createCanvas()
    canvas = love.graphics.newCanvas(virtualWidth, virtualHeight)
    canvas:setFilter("nearest", "nearest")
end

function love.load()
    love.window.setMode(screenWidth, screenHeight, {
        resizable = true,
        vsync = true
    })

    createCanvas()

    map = sti("map.lua")

    -- 玩家为蓝色方块
    player.width = 32
    player.height = 32
    player.x = 0
    player.y = 0
    player.speed = 100
end

function love.update(dt)
   -- dt=0.01
    local moveX, moveY = 0, 0
    if love.keyboard.isDown("right") then moveX = 1 end
    if love.keyboard.isDown("left")  then moveX = -1 end
    if love.keyboard.isDown("down")  then moveY = 1 end
    if love.keyboard.isDown("up")    then moveY = -1 end

    local norm = math.sqrt(moveX^2 + moveY^2)

    if norm > 0 then
        player.x = player.x + (moveX / norm) * player.speed * dt
        player.y = player.y + (moveY / norm) * player.speed * dt
    end

    -- 相机居中于玩家
    camera.x = math.floor(player.x) - virtualWidth / 2
    camera.y = math.floor(player.y) - virtualHeight / 2

    map:update(dt)
end

function love.draw()
    love.graphics.setCanvas(canvas)
    love.graphics.clear()

    love.graphics.push()
    love.graphics.translate(-camera.x, -camera.y)

    map:draw(-camera.x, -camera.y)

    -- 绘制玩家
    love.graphics.setColor(0, 0, 1)
    love.graphics.rectangle("fill", player.x, player.y, player.width, player.height)
    love.graphics.setColor(1, 1, 1)

    love.graphics.pop()
    love.graphics.setCanvas()

    -- 缩放显示画布
    local scaleX = screenWidth / virtualWidth
    local scaleY = screenHeight / virtualHeight
    local scale = math.min(scaleX, scaleY)
    local offsetX = (screenWidth - virtualWidth * scale) / 2
    local offsetY = (screenHeight - virtualHeight * scale) / 2

    love.graphics.setColor(1, 1, 1, 1)
    love.graphics.draw(canvas, offsetX, offsetY, 0, scale, scale)
end

function love.resize(w, h)
    screenWidth = w
    screenHeight = h
end

问题根源 #

1. 相机坐标取整导致的不连续移动：代码中对玩家坐标使用math.floor()取整计算相机位置，当玩家坐标为浮点值时，相机位置会出现跳跃式变化，导致地图与玩家的相对位置频繁跳动，产生闪烁。
2. 浮点坐标的像素对齐问题：像素风格游戏中，物体坐标未对齐到整数像素网格时，纹理渲染会因亚像素偏移出现抖动，线条类纹理表现尤为明显。

解决方案 #

方案一：取消相机坐标取整，实现平滑跟随 #

直接移除相机坐标的math.floor()操作，让相机跟随玩家的浮点坐标平滑移动，确保地图与玩家的移动同步：

-- 修改love.update中的相机计算代码
camera.x = player.x - virtualWidth / 2
camera.y = player.y - virtualHeight / 2

此方案适合需要平滑移动的非严格像素风格游戏，但仍可能存在轻微的亚像素抖动。

方案二：使用累加器实现像素对齐的移动（推荐） #

通过移动累加器将浮点增量累积，达到整数像素时再移动玩家，确保玩家和相机始终对齐到像素网格，彻底消除闪烁：

1. 初始化累加器：在love.load中添加玩家的移动累加器：

player.x = 0
player.y = 0
player.speed = 150 -- 可任意调整速度
player.xAccum = 0  -- X方向移动累加器
player.yAccum = 0  -- Y方向移动累加器

2. 修改移动逻辑：更新love.update中的移动代码，用累加器处理浮点增量：

function love.update(dt)
    local moveX, moveY = 0, 0
    if love.keyboard.isDown("right") then moveX = 1 end
    if love.keyboard.isDown("left")  then moveX = -1 end
    if love.keyboard.isDown("down")  then moveY = 1 end
    if love.keyboard.isDown("up")    then moveY = -1 end

    local norm = math.sqrt(moveX^2 + moveY^2)
    local moveSpeed = player.speed * dt

    if norm > 0 then
        -- 将移动增量累加到累加器
        player.xAccum = player.xAccum + (moveX / norm) * moveSpeed
        player.yAccum = player.yAccum + (moveY / norm) * moveSpeed

        -- 当累加器达到整数像素时，移动玩家并重置累加器剩余值
        local moveXInt = math.floor(player.xAccum)
        local moveYInt = math.floor(player.yAccum)
        
        if moveXInt ~= 0 then
            player.x = player.x + moveXInt
            player.xAccum = player.xAccum - moveXInt
        end
        if moveYInt ~= 0 then
            player.y = player.y + moveYInt
            player.yAccum = player.yAccum - moveYInt
        end
    end

    -- 相机使用玩家的整数坐标，保持完全对齐
    camera.x = player.x - virtualWidth / 2
    camera.y = player.y - virtualHeight / 2

    map:update(dt)
end

额外优化 #

确保STI绘制地图时使用整数坐标：由于相机坐标已为整数，map:draw(-camera.x, -camera.y)的参数也会是整数，结合画布的nearest过滤设置，纹理渲染会完全对齐像素，避免模糊或抖动。

内容的提问来源于stack exchange，提问作者Brandonn