C++ SFML开发中小数位移引发精灵渲染伪影如何解决

问题描述 #

使用C++搭配SFML开发游戏时，通过sf::Clock的restart().asSeconds()方法获取帧间隔delta time，将其乘以位移偏移量实现帧率无关的运动逻辑，目前遇到如下问题：

• 最终计算得到的位移值为整数浮点值（即*.0f）时，紧密排布的网格精灵渲染正常
• 位移值为非整数浮点值时，相邻精灵之间会出现异常缝隙线条的渲染伪影
  注意：不能直接对deltaTime * offset的计算结果取整，高帧率下该值会被取整为0，导致玩家对象完全无法移动。

相关实现代码 #

void Game::run()
{
    init();
    Gui::init();
    Gui::mainMenu();

    sf::Clock deltaClock;

    while (window.isOpen())
    {
        sf::Event loopEvent;
        while (window.pollEvent(loopEvent))
        {
            switch (loopEvent.type)
            {
            case sf::Event::Closed:
                saveGame();
                window.close();
                break;
            case sf::Event::KeyPressed:
                if (loopEvent.key.code == Gui::keybinds[Action::EXIT_MENU] && Player::hasSpawned)
                {
                    Gui::inMenu = false;
                    Gui::currentGameState = GameState::SETTINGS;
                }
            }
        }

        deltaTime = deltaClock.restart().asSeconds();
        update();

        window.setView(camera);
        window.clear(sf::Color::White);

        draw();
        window.display();

        Gui::checkGameState();
    }
}

const float Game::MAKE_DELTA(const float OFFSET)
{
    return OFFSET * deltaTime;
}

效果对比 #

• 整数位移（或对MAKE_DELTA()返回值取整）效果：
  
• 小数位移（不对MAKE_DELTA()返回值取整）效果：
  

• 分离逻辑坐标与渲染坐标（最推荐方案）
  不要直接把带小数的逻辑坐标传给SFML渲染，逻辑层全程保留浮点精度的坐标值做运动计算，从根源上避免高帧率下小位移被截断为0、对象无法移动的问题；仅在提交渲染的最后一步，对传给精灵的坐标做像素对齐处理：
  • 正交2D相机无缩放时：直接对渲染坐标做std::floor()取整即可，注意绝对不要修改逻辑层存储的浮点坐标值
  • 相机存在缩放时：对齐步长调整为1.f / 相机当前缩放系数，将坐标对齐到屏幕实际物理像素网格，避免亚像素采样
    这种方案不会出现移动卡顿：逻辑层的小位移会持续在浮点坐标上累加，当累加值跨过整数阈值时，渲染位置就会对应更新，不会丢失微小位移的累积效果。
    示例实现：

  // 逻辑更新阶段：全程使用浮点坐标计算，不做任何取整
  player.position += velocity * deltaTime;
  // 渲染提交阶段：仅临时计算对齐后的渲染坐标，不修改原逻辑坐标
  sf::Vector2f renderPos = {
      std::floor(player.position.x),
      std::floor(player.position.y)
  };
  player.sprite.setPosition(renderPos);
  

• 修正纹理采样配置
  所有网格瓦片使用的sf::Texture调用setSmooth(false)关闭纹理线性插值，同时调用setRepeated(false)，避免亚像素位置采样时，纹理边缘被插值出半透明像素、或者采样到纹理范围外的区域，产生视觉缝隙。
  如果使用瓦片集（tileset）绘制网格，给每个瓦片的源纹理矩形预留1px的透明内边距，剔除瓦片边缘的半透明插值像素，从资源层面避免采样溢出。
• 对齐视图坐标
  自定义sf::View时，如果视图中心坐标带小数、或者视图尺寸和窗口尺寸不是整数倍关系，整个场景都会落到亚像素渲染位置，会进一步放大缝隙问题。设置视图中心时同样做像素对齐：

  camera.setCenter(std::floor(followTarget.x), std::floor(followTarget.y));
  

• 批量绘制消除精度累积误差
  大面积同层网格可以改用sf::VertexArray批量绘制，把所有瓦片的顶点信息整合到同一个数组中提交，从根源上消除多个独立精灵位置分别计算带来的浮点精度差，还能提升渲染性能。

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